我在 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 会给我一个错误,即依赖项未知。
答案 0 :(得分:0)
您的问题在这里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]);