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

Posted 2023-04-14

【中文标题】如何根据其他状态更改更新一个状态项？

【英文标题】：How to update one state item based on other state changes?

【发布时间】：2019-04-30 07:46:15

【问题描述】：

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

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

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

【参考方案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
    )
  

【讨论】：

上下文中没有道具。

抱歉打错了，prevProps 应该是 prevState 在答案中。更新了