Question

在 React 中按顺序执行两个函数（传入 props）

2022-04-14

67

javascript reactjs

我有两个 React 类组件。 Component1 是 Component2 的父级，我有两个函数（functionA 和 B），它们通过 props 从 Component1 传递到 Component2 。嵌套在 Component2 中，我有一个函数 saveAndNotify() ，它应该仅在 functionA 完全执行完毕后才执行 functionA ，然后执行 functionB 。

有关更多上下文，functionA 更改 Component1 中的状态，functionB 使用该状态执行其他函数。

请参阅下面的 Component2 代码

export default class Component2 extends React.Component {
  static.propTypes = {
    functionA: PropTypes.func,
    functionB: PropTypes.func
  }


  render() {//some code
    return(//some code)
  }
  
  saveAndNotify = (my_arguments) => {
    this.props.functionA(func_a_args);
    this.props.functionB(func_b_args); // this needs to execute after functionA has 
    finished
  }

}

我是 JS 新手，已经阅读过有关使用回调的信息，但我无法按顺序执行此操作。特别是当我使用回调嵌套函数时，我不知道如何使用关键字 this 访问反应类组件。

我很感激您的指导。

Answer 1

您不需要回调。传递 2 个 props 将使事情更难维护，最好的办法是传递一个函数，我们可以将其称为 functionC ，它将使用 functionA 和 functionB ， functionA 将更新状态并将其返回以供 functionB 使用。

Component2：

export default class Component2 extends React.Component {
  static.propTypes = {
    functionC: PropTypes.func,
  }


  render() {//some code
    return(//some code)
  }
  
  saveAndNotify = (my_arguments) => {
    this.props.functionC(my_arguments)
  }

}

Component1 的 functionC：

functionC(my_arguments)) {
  const state = this.functionA()
  this.functionB(state)
}