反应状态未更新

Question

我知道这个主题已经问了很多问题，但确实感觉每个问题都不相同，我找不到一个与我的问题非常接近的问题。

我有一个带有可拖动ItemComponent的网格。选择后，将显示其他操作图标（ItemActionIcon）。一旦单击其中一个动作，我非常想取消选择组件（并有效隐藏动作图标）。

，因此在第77行<div onClick={() => this.setState({selected: false})} key={index}>中，我试图将selected的状态更新为false。在文件中提到的所有其他情况下，它已经可以正常工作。但在这种情况下不是。当我单击该图标时，我可以通过调试器（或在尝试时通过console.log看到）看到onClick操作已按预期触发，ItemComponent甚至再次调用了{ {1}}方法，但render仍设置为this.state.selected。

true

那是怎么回事？

Answer 1

组件的外部<div>具有自己的onClick处理程序，该处理程序将状态值设置回false。尝试在内部stopPropagation()处理的事件上使用onClick。这样可以防止事件传播到外部父节点<div>，并且在单击时仅执行内部onClick处理程序。

{
  !this.state.selected || !this.actions.length ? null : (
    <div
      style={{
        position: "absolute",
        bottom: "0"
      }}
    >
      {this.actions.map((action, index) => (
        <div
          onClick={e => {
            e.stopPropagation();
            this.setState({ selected: false });
          }}
          key={index}
        >
          <ItemActionIcon {...action} />
        </div>
      ))}
    </div>
  );
}