时间戳

首页 > 解决方案 > `data` 在 apollo useMutation Promise 中未定义

apollo - `data` 在 apollo useMutation Promise 中未定义

问题描述

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

我不想用.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>
}

标签： apolloreact-apolloreact-apollo-hooks

解决方案

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

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

推荐阅读