React自定义hook中useEffect调用setState无法更新状态问题

问题根源 #

你遇到的users状态始终为空数组的问题，核心原因是React状态更新的浅比较机制：

• 当调用setUsers(propItems)时，如果propItems和当前users的引用完全相同（比如是同一个数组/对象），React会判定状态没有变化，直接跳过更新流程，所以监听users的useEffect不会触发，组件也不会重新渲染。
• 虽然你看到propItems的控制台日志在变化，但大概率是同一个引用的对象内部属性被修改了，而非引用本身发生更换。

快速解决办法 #

1. 确保传递的propItems是新引用 #

在父组件传递items时，通过扩展运算符创建新的数组/对象引用：

// 父组件传递数组时
<Users items={[...yourOriginalItems]} />
// 传递对象时则用
<Users items={{...yourOriginalObj}} />

2. 在Hook内部创建新引用 #

如果无法修改父组件的传参逻辑，就在usePivot内部把propItems转换成新引用后再更新状态：

const usePivot = (propItems) => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    console.log("propItems in useUserPivot: ", propItems);
    // 根据propItems的类型创建新引用
    const updatedUsers = Array.isArray(propItems) 
      ? [...propItems] 
      : {...propItems};
    setUsers(updatedUsers);
  }, [propItems]);

  useEffect(() => {
    console.log("users: ", users);
  }, [users]);

  return [users];
}

3. 简化逻辑（如果不需要额外状态操作） #

如果你的usePivot只是单纯同步propItems到状态，完全可以去掉useState和useEffect，改用useMemo实现：

const usePivot = (propItems) => {
  // 依赖propItems变化时返回新值
  const users = useMemo(() => [...propItems], [propItems]);
  
  useEffect(() => {
    console.log("users: ", users);
  }, [users]);

  return [users];
}

额外排查项 #

• 验证父组件的items是否真的更换了引用：可以在父组件中用Object.is(prevItems, currentItems)打印对比结果，确认每次传递的是全新的值。
• 如果items是异步请求的结果，检查请求是否重复返回初始空数组，或者数据更新后是否正确触发了父组件的状态更新。

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