[未处理的承诺拒绝：类型错误：未定义不是对象（评估“response.data”）]

Question

I have a very simple Fetch API call as part of a React Native project. I'm seemingly able to receive the response data (verified with Console.log()), but for some reason, my data isn't being transferred into useState() properly. I haven't had any difficulties doing this before.

This is where I'm trying to store my data:

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

And this is my API call:

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

The test data I'm using for the input parameters to the fetch API call are email: hannah89orpington@gmail.com and token: 235906121209210 .

The strangest thing is that the line .then((response) => { console.log(response.data.authToken)}) returns the authToken that I want successfully, but when I call it in .then((response) => setData(response.data.authToken)) , it says that it's undefined. Any help would be appreciated.

Answer 1

You are using extra then in response. Try this

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

Answer 2

This is a short lesson for Promise and Thenables.

If you want to have multiple thenables like this, you need to ensure you return the value, so it can be pass on to the next function.

eg

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