调用的突变返回false，但对象是在数据库中创建的

Posted 2023-03-10

【中文标题】调用的突变返回false，但对象是在数据库中创建的

【英文标题】：Mutation called returns false, but the object is created in DB

【发布时间】：2020-03-20 01:21:40

【问题描述】：

我在 ReactJS 中构建了一个模式，并在提交按钮上添加了 handleClick。

    const handleSubmit = async (event) => 
    event.preventDefault();
    const res = await createApp(variables: id, name, url);
    console.log('response' + res)
    console.log('loading' + loading);
    console.log('called' + called);
    console.log('error' + error)
    console.log('data' + data)
  

在第一次点击时，我得到了

 response[object Object]
 loadingfalse
 calledfalse
 errorundefined
 dataundefined

在第二次点击时，我得到了

response[object Object]
loadingfalse
calledtrue
errorundefined
data[object Object]

但是，在第一次点击时正在 DB 中创建正确的对象！

【参考方案1】：

从您的问题中不清楚您是如何获得loading、error、called 和data 变量的，但我假设它来自useMutation 钩子。但是，如果您使用的是Mutation 组件，则以下说明仍然适用。

useMutation 钩子返回一个包含函数和MutationResult 对象的数组，其中包括loading、error、called 和data 等属性。这些属性被公开是为了方便更新组件的 UI，然而，它们只是普通的component state。因此，对它们的任何更改都是异步的，就像setState 一样。

换句话说，您可以调用并等待createApp，这样做的结果是，上述属性将最终更新。但是，不能保证他们会在createApp 返回的 Promise 解析之前更新。因此，即使您正在等待对createApp 的调用，这些属性中的每一个的值都尚未更新。如果不是将它们记录在单击处理程序中，而是将它们呈现在组件中，那么您会认为它们发生了适当的变化。

如果您需要在点击处理程序中访问您的操作返回的数据，您可以从已解析的 Promise 的值中进行操作：

const  data, error  = await createApp(variables: id, name, url);

// Note: loading and called are not exposed similarly because that would be moot --
// if the promise has resolved, the function was called and you're no longer loading

【讨论】：

谢谢你这么棒的解释，丹尼尔！这正是问题所在！