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

Posted 2023-03-17

【中文标题】React UseEffect 依赖于上下文不会立即更新组件

【英文标题】：React UseEffect dependent on context does not update component immediately

【发布时间】：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，这会将所有复选框重置为未选中。但是，复选标记消失之前有很长的延迟，或者只有将鼠标悬停在复选框上时，复选标记才会消失。

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

谢谢

【参考方案1】：

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