使用 React Query 获取数据时，使用用户数据自动填充表单在页面重新加载时不起作用

Question

我有一个简单的表单来更新用户数据。我在我的应用程序中使用 React Query。表单自动填充用户数据，并且用户更新突变也工作正常。当我刷新页面时，问题就出现了。输入字段不再显示用户数据。它们只是空白。

我尝试记录用户数据。最初数据未定义，然后提取成功，但表单字段仍为空白。

我尝试在网上寻找解决方案，但它说 localStorage 是唯一的选择。但我不确定 localStorage 是否是最佳选择。

这是我的表单在页面刷新之前的样子：

这就是我的表单在

页面刷新后的样子： 照片是从assests文件夹中获取的，因此它仍然存在，但其余的用户数据消失了。

这是获取用户数据的函数：

export const useUser = () => {
  const {
    data: user,
    isPending,
    isFetched,
  } = useQuery({
    queryKey: ["user"],
    queryFn: getCurrentUser,
  });

  return { isPending, user, isFetched };
};

这是表格：

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

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

  if (isLoadingUser || user === "undefined") {
    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>
  );
};

Answer 1

useUser

函数调用移动到 useEffect 中而不是立即调用它？

例如。 删除线

const { user, isPending: isLoadingUser, isFetched } = useUser();

。

然后添加：

React.useEffect(() => {

const {用户} = useUser();

setName(用户名?.name);
setEmail(用户?.email);
}, []);

这将作为反应周期的一部分在页面加载时运行。