如何根据其他状态更改来更新一个状态项？

Question

我正在使用react上下文来管理某些元素的显示/隐藏，因为这些元素取决于多个服务器调用的返回数据。 根据其他状态更改来更新上下文状态的正确方法是什么？

这是我尝试过的方法，但由于它变成了无限循环，因此无法正常工作。 所有prevState项都包含null或来自服务器的返回数据。

componentDidUpdate(prevProps, prevState) {
  this.setState({
    showX: (
      prevState.a &&
      prevState.b &&
      prevState.c
    ),
    showY: (
      prevState.d
    )
  })
}

Answer 1

您应该仅在带条件的语句中调用componentDidUpdate setState ，该条件语句检查道具或状态是否确实发生了变化。 还可以使用!!获得布尔值!! 或Boolean constructor

componentDidUpdate(prevProps, prevState) {
  const { a, b, c, d } = this.props;
  if (a !== prevState.a || b !== prevState.b || c !== prevState.c || d !== prevState.d) {
    this.setState({
      showX: !!(
        prevState.a &&
        prevState.b &&
        prevState.c
      ),
      showY: !!prevState.d
    })
  }

}