反应条件重新渲染未触发答案

【问题标题】：React conditional re-rendered not triggered反应条件重新渲染未触发
【发布时间】：2021-08-03 18:50:27
【问题描述】：

编辑这个问题是我在 shouldComponentUpdate 生命周期方法中没有注意到的情况。因此，如果您遇到像我这样的任何问题，请检查此内容。编辑

我几乎陷入了僵局，我不明白为什么简单的条件重新渲染不起作用。

我有以下状态

  constructor(props) {
    super(props);
    this.state = {
 showConflicts: false
}

我想根据状态中的参数切换组件，所以我有这个按钮：

 <Icon
              icon={"info-sign"}
              intent={"primary"}
              onClick={this.handleShowConflict}
            />

触发这个

  handleShowConflict = (e) => {
    this.setState({
      showConflicts: !this.state.showConflicts
    })
  }

点击按钮后，状态会正确更新。

但我的组件没有改变。刚刚写了一个我所拥有的虚拟咆哮：

            {
              this.state.showConflicts?
            
               <ConflictTab
                 scrollTo={this.handleConflictScrollTo}
                 data={this.state.conflicts}
               />
              : <Icon
              icon={"info-sign"}
              intent={"primary"}
              onClick={this.handleShowConflict}
            />
            }

我在这方面花了太多时间，我不知道为什么，但我的代码没有重新渲染。

我在这个项目上有一堆类似的实现，它们工作正常，在设置状态下会重新渲染，但在这个特定组件上却不是。

提前非常感谢！

【问题讨论】：

什么是 isConflictsUpdated ？
我没看到，你在哪里更新this.state.isConflictsUpdated？
我的错。。我现在手动写了代码，拼错了，应该是this.state.showConflicts
无论何时使用先前的状态来导出新的状态值总是更好地使用这个：this.setState((prevState) => { return { showConflicts: prevState.showConflicts } })。设置状态是异步的，你不应该依赖状态值。
Icon 是你定制的组件吗？ onClick 可能不会那样工作

标签： javascript reactjs setstate

【解决方案1】：

您在 setState 中引用状态。尝试解决该问题，看看它是否有效

  handleShowConflict = (e) => {
    this.setState(prev => ({
      showConflicts: !prev.showConflicts
    }))
  }

this.state 可能会异步更新，您不应依赖它们的值来计算下一个状态。

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

【讨论】：

很遗憾，它不起作用，这是我所做的代码更改，this.setState((prevState) => { return { isConflictsUpdated: !prevState.isConflictsUpdated }; }); };
哦，好吧，对此感到抱歉..也许您可以提供一个运行示例？
codesandbox.io/s/affectionate-tdd-8lo4q?file=/src/App.js，但遗憾的是它在沙箱中工作，我无法复制我的整个组件，它很大，知道什么会影响这个吗？单击该按钮时，我没有执行任何其他设置状态