3

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>
}
4

2 回答 2

1

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

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

于 2019-09-15T01:41:52.497 回答
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
            })
        }
于 2020-06-06T16:44:06.233 回答