在React中调用setState后如何调用2个函数？

Question

我必须在setState更新后立即调用2个函数。我想使用回调函数。但是问题是当前组件中存在一个函数，而我正在调用子组件的另一个函数（使用引用）。代码看起来像这样：

  handleChange_First = (event) => {


    const name = event.target.name;

    this.setState({
        [name]: event.target.value
    },() => {this.calculate()});
    this.child.handleChange(event)
   }

我想在setState更改后立即调用this.calculate（）和this.child.handleChange（event）。现在，它正在更新当前组件的值（this.calculate），但是子组件的值（handleChange）没有更新。

或者如果有任何其他方法可以在setState之后同时调用两个函数，这也将非常有帮助。

Answer 1

将第二个函数调用输入到回调函数主体中。试试这个：

handleChange_First = (event) => {
        const name = event.target.name;

        this.setState({[name]: event.target.value},() => {
                this.calculate();
                this.child.handleChange(event);
              });
}

Answer 2

React使用合成事件模式。从docs：

SyntheticEvent已合并。这意味着在调用事件回调之后，将重新使用SyntheticEvent对象，并且所有属性都将无效。这是出于性能原因。因此，您不能以异步方式访问事件。

这是相同的原因，您无法在回调中使用event。 （setState是异步的，首先必须使用回调的原因）

尽管有一个逃生舱口，您可以通过调用event.persist()来要求React不要汇总事件。

handleChange_First = (event) => {
  event.persist();
  const name = event.target.name;

  this.setState({[name]: event.target.value},() => {
     this.calculate();
     this.child.handleChange(event);
  });
}

Answer 3

您可能尝试通过setTimeout进行调用，这将独立执行该函数。