完成 useMutation 后如何更新 React state？

Question

我使用 react-query 的 useMutation 挂钩将用户添加到 api。 有用。 现在，我需要将新用户添加到我的用户数组中，该数组位于我的 state 中。

我知道我应该使用 useQuery 查询所有用户，然后在 useMutation 中使用 onSuccess 来修改缓存。 但在某些情况下，我不会使用 useQuery 获取用户，因此我需要更新本地 state，就像使用普通 promise 一样。

目前，我只是检查道具“成功”是否为真，如果是，我更新数组。 但它只适用于第二次点击。 为什么以及如何解决这个问题？

似乎 onAddUser() 内的成功条件只有在第二次点击时才能达到。

 export default function App() { const { updateUser } = userService(); const { update, loading, error, data, success } = updateUser(); const [users, setUsers] = useState(allUsers); const onAddUser = async () => { await update(newUser); if (success) { return setUsers((users) => [...users, data]); } }; return ( <> <div> {users.map((user) => ( <div key={user.id}> {user.name} - {user.job} </div> ))} </div> {loading && <div>sending...</div>} {error && <div>error</div>} <button onClick={() => onAddUser()}>add user</button> </> ); }

这里还有一个沙箱： https://codesandbox.io/s/usemutation-test-co7e9?file=/src/App.tsx:283-995

Answer 1

从updateUser返回的success属性（我假设这是 useMutation 返回的结果）只会在下一个渲染周期更新。 即使您在那里有异步等待，函数仍将保留对它们关闭的任何内容的引用。 这不是特定于 react-query 的，这就是 react 的工作原理。

我建议使用突变 function 的onSuccess回调，或使用mutateAsync并检查结果，但请记住，如果使用mutateAsync手动捕获错误。 您可以在此处阅读mutateAsync ，我将向您展示一个mutate示例：

const { mutate, loading } = useMutation(() => ...);
const onAddUser = () =>
    mutate(newUser, {
        onSuccess:  (newData) => setUsers((users) => [...users, data]);
    });
  };

另外，请不要违反钩子的规则。 您只能从功能组件或其他挂钩（=以use开头的函数）调用挂钩，但在您的代码和框中，您可以从updateUser function 调用useMutation ...