React UseEffect 依赖于上下文不会立即更新组件答案

【问题标题】：React UseEffect dependent on context does not update component immediatelyReact UseEffect 依赖于上下文不会立即更新组件
【发布时间】：2021-12-13 22:29:23
【问题描述】：

我有一个复选框列表，其中每个都是一个单独的功能组件。有一个重置按钮，可以将所有复选框设置为取消选中。

我正在使用上下文来存储检查的数据值。单击重置按钮时，我使用以下逻辑更新每个复选框。

Button.tsx

onResetClicked = () => {
  context.data = []
}

复选框.tsx

React.useEffect(()=> {
  if(context.includes(props.data)){
    setIsChecked(true);
  } else {
    setIsChecked(false);
  }
}, [context]);

我希望在单击重置按钮时会调用 useEffect，这会将所有复选框重置为未选中。但是，复选标记消失之前有很长的延迟，或者只有将鼠标悬停在复选框上时，复选标记才会消失。

有人知道这是什么问题以及如何解决吗？

谢谢

【问题讨论】：

标签： use-effect use-context react-tsx

【解决方案1】：

对于可能遇到此问题的任何其他人，问题出在Button.tsx 中，其中设置了上下文。而不是使用context.data=[] 更新上下文，而是应该使用setter。这样 React 就会知道上下文何时更新。

【讨论】：