React useEffect依赖Context时组件未立即更新问题求解

• 核心原因是你直接修改了Context的属性值，没有通过React官方的状态更新接口触发重渲染。React的响应式更新依赖状态变更的广播机制，直接对context.data赋值属于裸改引用类型的属性，不会触发Context的Provider组件重渲染，所有消费该Context的Checkbox组件都收不到更新通知，关联的useEffect自然不会执行。
• 出现「悬浮才更新勾选状态」的现象，是因为鼠标悬浮触发了Checkbox组件的内部重渲染（比如组件内置了hover相关的交互状态），此时组件才会读取到已经被修改的context.data值，同步更新勾选状态。

1. 调整Context的定义，使用useState托管选中数据，在Context的value中暴露官方更新方法，禁止直接修改Context属性：

// Context提供者所在组件代码示例
import { useState, createContext } from 'react';

const CheckboxContext = createContext({
  data: [],
  setSelectedData: (val: any[]) => {}
});

// 提供者组件
function CheckboxProvider({ children }) {
  const [selectedData, setSelectedData] = useState<any[]>([]);
  return (
    <CheckboxContext.Provider value={{ data: selectedData, setSelectedData }}>
      {children}
    </CheckboxContext.Provider>
  )
}

2. 修改重置按钮的逻辑，调用暴露的更新方法修改状态：

// Button.tsx
onResetClicked = () => {
  context.setSelectedData([]);
}

3. （可选优化）Checkbox组件可以删除内部的isChecked状态和对应的useEffect，直接通过Context的值派生选中状态，避免多源状态不同步的问题：

// Checkbox.tsx 简化写法
function Checkbox(props) {
  const context = useContext(CheckboxContext);
  // 直接派生选中状态，无需本地状态缓存
  const isChecked = context.data.includes(props.data);
  // 渲染时直接绑定isChecked到复选框的checked属性即可
  return <input type="checkbox" checked={isChecked} />
}

内容的提问来源于stack exchange，提问作者Helen