在使用 react-query 进行异步数据处理时,当一个 mutation 被服务器拒绝时,可能会出现“Uncaught(in promise)”错误。解决该问题的方法是在 Mutation 的 options 中添加一个 onError 回调函数来捕获错误并进行处理。
下面是一个示例代码:
import { useMutation } from 'react-query';
function updateUser(id, userData) {
return fetch(`https://my-api.com/users/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(userData),
}).then((res) => {
if (!res.ok) {
throw new Error('Update failed');
}
return res.json();
});
}
function EditUserForm({ user }) {
const [name, setName] = useState(user.name);
const [age, setAge] = useState(user.age);
const [mutate, { isLoading }] = useMutation(updateUser, {
onError: (error) => {
console.error('Mutation failed:', error);
},
});
const handleSubmit = (e) => {
e.preventDefault();
mutate({ id: user.id, name, age }).then(() => {
console.log('Mutation successful');
});
};
return (
);
}
在这个示例中,如果更新用户失败,会触发 onError 回调函数,并在控制台中打印错误消息。如果更新成功,会打印“Mutation successful”消息。