如何解决使用 useEffect 在第一次渲染时运行 Apollo 突变
我在 MUI 对话中有一个表单。我想在对话第一次打开时创建一个订单。我认为具有空依赖项的 useEffect 会这样做,但我似乎无法弄清楚为什么它不让突变在 setState 之前解决。
const [createOrder] = useMutation(CREATE_ORDER);
const [activeOrder,setActiveOrder] = useState({});
useEffect(() => {
const newOrder = async () => {
await createOrder({
variables: {
order: {
type,table,},refetchQueries: [{ query: ORDERS_QUERY }],});
};
setActiveOrder(newOrder);
},[]);
console.log(activeOrder); // gives me Promise{<fulfilled>: undefined}
此外,是使用 // eslint-disable-next-line
摆脱缺少依赖项警告的唯一方法吗?如果我将我的函数包装在 useCallback 中以防止渲染循环并添加请求的依赖项,那么 useCallback 会给我一个错误,即依赖项未知。
解决方法
您的问题在这里setActiveOrder(newOrder);
-
setActiveOrder
可以接受函数作为参数并调用它; -
newOrder
是异步函数。异步函数总是返回承诺;
解决方案:
/*
maybe your don't need activeOrder,check data from result
https://www.apollographql.com/docs/react/data/mutations/#result
*/
const [createOrder,{ data }] = useMutation(CREATE_ORDER,{
// https://www.apollographql.com/docs/react/data/mutations/#options
variables: { type,table },refetchQueries: [{ query: ORDERS_QUERY }],});
const [activeOrder,setActiveOrder] = useState({});
useEffect(() => {
createOrder().then((res) => {
setActiveOrder(res);
});
},[createOrder]);
useEffect(() => console.log('data:\n',data),[data]);
useEffect(() => console.log('activeOrder:\n',activeOrder),[activeOrder]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。