Question

[未处理的承诺拒绝：TypeError：未定义不是一个对象（评估'response.data'）]

2020-11-23

4380

javascript react-native fetch-api

作为 React Native 项目的一部分，我有一个非常简单的 Fetch API 调用。我似乎能够接收响应数据（已通过 Console.log() 验证），但出于某种原因，我的数据无法正确传输到 useState() 。我以前做这件事的时候没有遇到任何困难。

这是我尝试存储数据的地方：

const [data, setData] = useState("");

这是我的 API 调用：

fetch('https://api.panodime.com/v1/oauth-login?email=' + email + '&token=' + token, {
    headers: { 'X-ApiKey': 'doxy08E9SqxTvgvFpB3yOEGCO4YE77m88iSXTQ5TZrcpf3Qw' }
})
    .then((response) => { return response.json() })
    .then((response) => { console.log(response.data.authToken)})
    .then((response) => setData(response.data.authToken))
    //.then(() => console.log(data))
    //.then(() => storeData(data))
    //.catch((error) => console.error(error))

我用于获取 API 调用的输入参数的测试数据是 email: [email protected] 和 token: 235906121209210 。

最奇怪的是， .then((response) => { console.log(response.data.authToken)}) 成功返回我想要的 authToken，但是当我在 .then((response) => setData(response.data.authToken)) 中调用它时，它说它未定义。任何帮助都将不胜感激。

Answer 1

这是关于 Promise 和 Thenables 的简短课程。

如果您想要拥有多个这样的 thenables，您需要确保返回该值，以便它可以传递给下一个函数。

例如

.then((response) => { 
     console.log(response.data.authToken)
     return response //this pass response to next function
 })
.then((response) => setData(response.data.authToken))

Answer 2

您在响应中使用了 extra then 。尝试这个

fetch('https://api.panodime.com/v1/oauth-login?email=' + email + '&token=' + token, {
                headers: { 'X-ApiKey': 'doxy08E9SqxTvgvFpB3yOEGCO4YE77m88iSXTQ5TZrcpf3Qw' }
            })
     .then((response) => { return response.json() })
     .then((response) => { 
      console.log(response.data.authToken);
      setData(response.data.authToken) // do here
     })
     .then((response) => setData(response.data.authToken)) // remove this