为什么Context更新时我的React组件没有触发重新渲染？

问题根因 #

你的组件实际已经被Context更新触发了重渲染，第二个监听data的useEffect能正常打印就可以证明这一点，你误以为没重渲染是数据结构错误导致渲染逻辑执行异常，没有输出预期的表格内容，具体问题出在两个地方：

• 第一个useEffect存在闭包陷阱：你给useEffect传的依赖数组是空值，回调里捕获的data永远是组件首次渲染时的初始值（一般是空数组）
• 追加数据时没有正确摊平数组：res.results本身就是返回的用户对象数组，你直接把它作为单个元素塞到了data里，最终data的结构是[[用户1, 用户2...]]二维数组，不是你预期的一维用户数组

你在遍历data时拿到的每一项是整个用户数组，调用user.dob.date会直接抛出类型错误，渲染逻辑中断，自然看不到表格行。

修复方案 #

修改第一个useEffect的写法，用函数式更新拿到最新的状态，同时正确展开返回的用户数组：

useEffect(() => {
  fetchUsers(`https://randomuser.me/api/?results=50`).then(
    (res) => {
      // 函数式更新避免闭包问题，同时展开res.results把用户摊平为一维数组
      setData(prevData => [...prevData, ...res.results]);
      // 如果你不需要追加、只是首次加载全量覆盖，直接写 setData(res.results) 即可
    }
  )
// 依赖数组只需要放引用稳定的setData，不需要放data
}, [setData])

额外验证点：确认你的dataContext.Provider已经正确包裹了Table组件，且Provider的value属性传递的setData是useState返回的原生更新函数（引用稳定，不会反复触发不必要的重渲染）。

内容的提问来源于stack exchange，提问作者João Pedro