React状态更新异常：创建/更新用户时State未变更问题排查

1. 闭包陷阱（最常见原因） #

如果createNewUser和updateUser中更新状态的方式是直接依赖当前users变量，比如：

// 错误示例：直接使用当前users变量
const createNewUser = () => {
  apiCall().then(newUser => {
    setUsers([...users, newUser]); // 这里的users是Hook初始化时的旧值
  });
};

而deleteUser用了函数式更新（依赖前一状态）：

// 正确示例：函数式更新
const deleteUser = (id) => {
  apiCall().then(() => {
    setUsers(prevUsers => prevUsers.filter(u => u.id !== id));
  });
};

这种情况下，createNewUser和updateUser会因为闭包捕获了旧的users引用，导致更新后状态没有变化。

解决：把setUsers改成函数式更新，依赖前一状态计算新值：

// 修复createNewUser
const createNewUser = () => {
  apiCall().then(newUser => {
    setUsers(prevUsers => [...prevUsers, newUser]);
  });
};

// 修复updateUser
const updateUser = (updatedData) => {
  apiCall().then(updatedUser => {
    setUsers(prevUsers => prevUsers.map(u => u.id === updatedUser.id ? updatedUser : u));
  });
};

2. 自定义Hook中方法未用useCallback包裹，导致子组件捕获旧引用 #

如果useUsers返回的createNewUser、updateUser没有用useCallback包裹，当父组件重渲染时，这些方法会生成新的引用。如果UserFormModal是用React.memo包裹的纯组件，或者模态框的内容是在初始渲染时挂载的（比如某些UI库的Modal组件），会导致Modal捕获到旧的方法引用，里面的users还是旧值。

解决：用useCallback包裹useUsers中的方法，依赖项设为setUsers（React中setUsers引用稳定）：

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

  const createNewUser = useCallback(() => {
    apiCall().then(newUser => {
      setUsers(prev => [...prev, newUser]);
    });
  }, [setUsers]);

  const updateUser = useCallback((updatedData) => {
    apiCall().then(updatedUser => {
      setUsers(prev => prev.map(u => u.id === updatedUser.id ? updatedUser : u));
    });
  }, [setUsers]);

  const deleteUser = useCallback((id) => {
    apiCall().then(() => {
      setUsers(prev => prev.filter(u => u.id !== id));
    });
  }, [setUsers]);

  return { users, createNewUser, updateUser, deleteUser };
};

3. Modal组件的渲染时机问题 #

如果UserFormModal是通过类似visible控制显示的模态框，且模态框的内容（包括调用createNewUser的逻辑）是在visible为false时就已经渲染的（比如某些UI库的Modal会提前渲染内容节点），会导致当visible变为true时，调用的方法还是初始渲染时的旧引用，捕获了旧的users。

解决：确保Modal的内容在visible为true时才渲染，比如：

// 正确写法：条件渲染Modal内容
<UserFormModal 
  visible={isModalOpen}
  onSubmit={createNewUser}
>
  {isModalOpen && <UserForm />}
</UserFormModal>

或者使用UI库提供的destroyOnClose属性（比如antd的Modal），关闭时销毁内容组件，下次打开时重新渲染，确保捕获最新的方法和状态。

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