`data` 在 apollo useMutation Promise 中未定义答案

【问题标题】：`data` is undefined in apollo useMutation Promise`data` 在 apollo useMutation Promise 中未定义
【发布时间】：2020-01-16 07:43:11
【问题描述】：

为什么data在Promise中是未定义的，即使它出现在下面的html中？

我不想使用.then((data) =>

const LoginPage: React.SFC<{}> = () => {
    const [login, { loading, data, error }] = useMutation<Q, V>(MUTATION)

    const onSubmit = event => {
        event.preventDefault()
        login({
            variables: {
                email,
                password
            }
        }).then(() => {
            console.log(data)         // <-- undefined
        }).catch(() => {
            console.log(error)        // <-- OK
        })
    }

    return <div>
        <form onSubmit={onSubmit}> ... </form>

        {data && <pre>{JSON.stringify(data)}</pre>}          //  <-- OK
    </div>
}

【问题讨论】：

标签： apollo react-apollo react-apollo-hooks

【解决方案1】：

原始问题的变体。不确定它是否按预期工作，因为突变的 Promise 的结果是未定义的。谢谢。

        const [login] = useMutation(MUTATION);

        const onSubmit = event => {
            event.preventDefault()
            login({
                variables: {
                    email,
                    password
                }
            }).then((result) => {
                console.log(result)       // <-- undefined
            }).catch(() => {
                console.log(error)        // <-- OK
            })
        }

【讨论】：

【解决方案2】：

这是按预期工作的。调用由useState 钩子is asynchronous 返回的状态更新器函数引起的状态更新。 useState 在后台被useMutation 用来管理钩子返回的各种状态位（data、loading、error 等），所以这个状态也会异步更新。这意味着 login 返回的 Promise 可以解析，并且在这样做时，适当的状态将被更新，而不是立即更新。更新后，组件会重新渲染，您会在组件中看到更新后的值。

如果您需要在 Promise 解析后以某种方式使用突变返回的数据，那么您需要通过从 Promise 的解析值中提取它来实现，而不是依赖于组件状态。

【讨论】：