同时更改子组件和父组件中的两个状态

Question

我有两个组成部分，父组件位于我通过此道具的位置下方

changeState={() => this.functionName(index)}

functionName = (index) => () => {
  this.setState({ activeTab: index })
}

然后我有一个子组件，我在其中声明道具并调用函数

onClick={changeState}

这可以按预期工作并更改父组件中的状态。我遇到的问题是，同时我还想让另一个onClick在子组件中同时更改另一个状态。

我同时放入了一个函数，并用一个onClick调用了该函数，但是只有一个被调用...我拥有的另一个onClick是

this.toggle

toggle = () => {
  this.setState({
    collapsed: !this.state.collapsed,
  });
}

我要实现的目标是可能的吗？还是我在调用两个单独的setState导致它在另一个被调用之前重新渲染？

Answer 1

我认为您应该lift state up在子组件中。

您的方法可能会产生怪异的副作用，这与父母的提神和孩子的同时感冒一样。

但是，您应该能够将回调作为第二个参数添加到setState中，如下所示：

toggle = () => {
  this.setState({
    collapsed: !this.state.collapsed,
  }, changeState);
}