gpt4 book ai didi

reactjs - useMutation 完成后如何更新 React 状态?

转载 作者:行者123 更新时间:2023-12-04 08:06:33 25 4
gpt4 key购买 nike

我使用 react-query 的 useMutation Hook 将用户添加到 api。有用。现在,我需要将新用户添加到我的用户数组中,该数组处于我的状态。

我知道我应该使用 useQuery 查询所有用户,然后在 useMutation 中使用 onSuccess 来修改缓存。但在某些情况下,我不使用 useQuery 获取用户,因此我需要更新本地状态,就像我在正常 promise 中所做的那样。

目前,我只是检查属性“success”是否为真,如果是,我更新数组。但它只适用于第二次点击。为什么以及如何解决这个问题?

似乎 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

最佳答案

updateUser 返回的 success Prop (我假设这是 useMutation 以某种方式返回的结果)只会在下一个渲染周期更新。函数仍然会保留对它们关闭的任何内容的引用,即使你在那里有一个异步等待。这不是特定于 react 查询的,这就是 react 的工作原理。

我建议使用变异函数的 onSuccess 回调,或使用 mutateAsync 并检查结果,但您必须记住手动捕获错误,如果您使用 mutateAsync。您可以阅读有关 mutateAsync here 的内容,我将向您展示一个 mutate 示例:

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

另外,请不要违反钩子(Hook)的规则。您只能从功能组件或其他 Hook (=以 use 开头的函数)调用 Hook ,但在您的 codesandbox 中,您从 updateUser useMutation函数...

关于reactjs - useMutation 完成后如何更新 React 状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66194890/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com