reactjs - 完成 useMutation 后如何更新 React 状态?
问题描述
我使用 react-query 的 useMutation 钩子将用户添加到 api。有用。现在,我需要将新用户添加到处于我状态的用户数组中。
我知道我应该使用 useQuery 查询所有用户,然后在 useMutation 中使用 onSuccess 来修改缓存。但在某些情况下,我不会使用 useQuery 获取用户,因此我需要更新本地状态,就像使用普通承诺一样。
目前,我只是检查道具“成功”是否为真,如果是,我更新数组。但它只适用于第二次点击。为什么以及如何解决这个问题?
似乎 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
解决方案
从返回的success
道具updateUser
(我假设这是 useMutation 返回的结果)只会在下一个渲染周期更新。即使您在那里有异步等待,函数仍将保留对它们关闭的任何内容的引用。这不是特定于 react-query 的,这就是 react 的工作原理。
我建议使用onSuccess
突变函数的回调,或者使用mutateAsync
并检查结果,但如果你使用mutateAsync
. 你可以在mutateAsync
这里阅读,我会给你看一个mutate
例子:
const { mutate, loading } = useMutation(() => ...);
const onAddUser = () =>
mutate(newUser, {
onSuccess: (newData) => setUsers((users) => [...users, data]);
});
};
另外,请不要违反钩子的规则。您只能从功能组件或其他钩子(=以 开头的函数use
)调用钩子,但在您的代码和框中,您useMutation
从updateUser
函数调用...
推荐阅读
- html - html5 2 图像内部部分仅包含 css
- c# - 尝试在 C# 中重写以下算法,该算法基于一个公共键合并两个数组
- javascript - 计算按键中的值
- two-way-binding - 单向绑定是否意味着没有使用 setTimeout 函数的观察者?
- elasticsearch - Elasticsearch:从索引中的文档中获取 match_phrase
- java - 使用 Socks 的 Java JDBC 连接
- python - Plotly Python:在具有多个 Y 轴的分组条形图中对齐 X 轴
- regex - 如何在 AWK 中干净地处理/忽略(Unicode?)不可打印的二进制字符
- java - 设置自动保存计时器以在 java 中定期保存文件的最佳策略是什么(但不使用任何 javafx API)?
- html - 如何链接到父文件夹中的文件?