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

Question

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

这是我尝试过的，但它没有工作，因为它变成了一个无限循环。所有prevState项目都包含null或来自服务器的返回数据。

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

Answer 1

您应该只使用检查 props 或 state 是否实际更改的条件语句来调用setStateinside 。componentDidUpdate还可以使用!!or获取布尔值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
    })
  }

}