Question

为什么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>
}

Answer 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
            })
        }

Answer 2

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

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

在阿波罗用途中未定义`data`

2 个答案: