React函数组件二次渲染后Set State失效问题求助

问题原因 #

核心问题是闭包陷阱导致状态更新依赖旧值：

• 你的状态更新逻辑（handleSelect、onClose以及useEffect中的setState）都直接依赖当前作用域中的state变量。当组件因导航返回重新挂载或多次渲染后，这些函数会捕获到渲染时的旧state引用。
• 尤其是useEffect的依赖为空数组，其回调只会在组件首次挂载时创建，捕获的是初始state；导航返回后组件重新挂载，即便useEffect再次执行，后续状态更新若仍依赖闭包中的旧state，就会引发更新异常。
• 你看到handleSelect能打印正确的entity但状态不更新，是因为setState传入的新状态因闭包引用的旧值，与React内部维护的最新状态产生冲突，或是新状态与旧状态浅相等，导致React判定无需更新。

解决方案 #

将所有setState调用改为函数式更新，让React传入当前最新的状态，彻底避开闭包捕获旧值的问题：

修改后的完整代码 #

const Clients = () => {
  const [state, setState] = useState({
    loading: true,
    entities: [],
    editing: null,
  });

  const ajax = useAjax(api.scopes);
  const errorHandler = useErrorHandler();

  useEffect(() => {
    ajax.get(`${api.endpoint}/clients`)
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        throw new HttpError(response);
      })
      // 改用函数式更新，基于最新状态修改
      .then((json) => setState(prevState => ({
        ...prevState,
        entities: json,
        loading: false,
      })))
      .catch(errorHandler);
  }, []);

  const handleSelect = (entity) => {
    console.log({ entity });
    // 函数式更新，确保使用最新状态
    setState(prevState => ({
      ...prevState,
      editing: entity,
    }));
  };

  console.log('hello world!');

  const { loading, entities, editing } = state;

  return (
    loading ? <LinearProgress /> : (
      <>
         <TableComponent entities={entities} onSelect={handleSelect} />
         <EditingComponent 
            entity={editing}
            open={!!editing}
            // 同样使用函数式更新
            onClose={() => setState(prevState => ({ ...prevState, editing: null }))}
          />
      </>
    )
  );
};

export default Clients;

额外优化建议 #

• 建议将复合state拆分为多个独立的useState变量，比如：

  const [loading, setLoading] = useState(true);
  const [entities, setEntities] = useState([]);
  const [editing, setEditing] = useState(null);
  

  拆分后无需复杂的对象展开操作，能减少闭包陷阱概率，同时让状态更新逻辑更清晰。
• 检查useEffect的依赖项，如果ajax或api变量存在变化可能，建议将其添加到依赖数组中（可配合useCallback/useMemo避免不必要的重渲染），确保回调始终使用最新的依赖。

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