使用React Query时页面刷新后用户数据表单自动填充失效

核心问题在于：组件挂载时useState仅初始化一次。页面刷新后组件重新挂载，此时React Query还未完成用户数据获取，user为undefined，导致name和email初始值变为undefined；后续user数据加载完成后，useState不会自动同步更新，最终表单字段保持空白。

方案1：用useEffect监听user变化，同步表单状态 #

这是最直接的修复方式，当user数据加载完成后，手动更新表单状态：

const UserDetail = () => {
  const { user, isPending: isLoadingUser } = useUser();
  const { updateUserMutation, isUpdatingUser } = useUpdateUser();

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  // 监听user数据变化，同步到表单
  useEffect(() => {
    if (user) {
      setName(user.name);
      setEmail(user.email);
    }
  }, [user]);

  if (isLoadingUser) {
    return <Spinner />;
  }

  // 其余表单代码保持不变
};

方案2：结合React Query缓存与表单状态 #

如果需要保留表单编辑的临时状态，同时在user数据更新时同步最新值，可以在初始化useState时先使用user的可选链值，再通过useEffect监听同步：

const UserDetail = () => {
  const { user, isPending: isLoadingUser } = useUser();
  const { updateUserMutation, isUpdatingUser } = useUpdateUser();

  const [name, setName] = useState(user?.name || '');
  const [email, setEmail] = useState(user?.email || '');

  // 当user数据更新时（比如重新获取），同步最新数据
  useEffect(() => {
    if (user) {
      setName(user.name);
      setEmail(user.email);
    }
  }, [user]);

  if (isLoadingUser) {
    return <Spinner />;
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label className="form__label">Name</label>
          <input
            id="name"
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            required
            disabled={isUpdatingUser}
          />
        </div>
        <div>
          <label>Email</label>
          <input
            id="email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
            disabled={isUpdatingUser}
          />
        </div>
      </form>
    </div>
  );
};

关于localStorage的说明 #

localStorage并非当前问题的最佳方案。React Query本身具备缓存机制，刷新页面后会自动重新发起请求获取用户数据，你只需要确保表单状态能响应user数据的变化即可。只有当需要在用户关闭浏览器后仍保留表单临时数据时，才考虑结合localStorage使用。

• 代码中user === "undefined"的判断逻辑错误，user的类型是对象或undefined，不会是字符串"undefined"，应改为!user；
• 可以用React Query的isSuccess状态替代isFetched，更准确地判断数据是否成功获取。

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