I'm trying to do a GET fetch request to certain endpoint. My problem is that running the app, I get this error message: Possible Unhandled Promise Rejection (id: 39): TypeError: Cannot read properties of undefined (reading 'then')
Although after re-saving my visual studio code file, I can see all 16 objects.
const TotalEarnings = () => {
const [test, setTest] = useState("")
const [data, setData] = useState([]);
useEffect(() => {
async function getEarnings(){
const headers = await GetUserToken()
const response = await fetch('This is where I have my API',
{method: 'GET',
headers: headers,
'content-type': 'application/json',
'token-type': 'Bearer', ACCEPT: 'application/json',
}).then((res) => res.json())
.then(result => setData(result.body, 'last promosise data'))
console.log(data)
.then(response, 'test response')
setTest( await AsyncStorage.getItem('access-token'))
setTest( await AsyncStorage.getItem('client'))
setTest( await AsyncStorage.getItem('expiry'))
setTest( await AsyncStorage.getItem('uid'))
}
getEarnings()
},[] );
[![enter image description here][1]][1]This is what my console looks when I have run the app once, and after saving the file again, the objects appear in the console... [1]: https://i.stack.imgur.com/MRXmm.png
You are breaking the then chain by inserting a console.log in between them.
...
.then(result => setData(result.body, 'last promosise data'))
console.log(data) // This breaks the chain
.then(response, 'test response') // This causes Possible Unhandled Promise Rejection
...
.then(response, 'test response') causes Possible Unhandled Promise Rejection since console.log does not resolve any promise. Removing it eliminates the promise rejection.