I'm currently learning JavaScript and I've started working on a mobile application using React Native. However, I've encountered some issues with the IGDB API and the "Fetch" method from MDN.
My problem lies in trying to store a JSON response into an array and display it using a FlatList. Unfortunately, nothing gets printed - not even the "Test:" text or the "{item.id}". I'm unsure if this is due to the API itself or my implementation of the FlatList component.
Interestingly, testing the request on Postman yields successful results.
When I make the request to the API, the response is correctly displayed in the terminal.
Below are the main JS files I'm using along with a warning message that pops up when I receive a response from the API.
Feel free to ask any questions you might have, and I'll do my best to provide clear answers.
//Search.js
import React from 'react'
import { View, TouchableOpacity, TextInput, StyleSheet, Image, FlatList, Text } from 'react-native'
import { getGamesFromApiWithSearchedText } from '../API/IGDB'
class Search extends React.Component {
constructor(props) {
super(props)
this.state = {
games: []
}
}
render() {
return (
<View>
<View>
<TextInput placeholder='Search games and stuff...' />
<TouchableOpacity onPress={() => this._loadGames()}>
<Image source={require('../images/icons/ic_search.png')}/>
</TouchableOpacity>
</View>
<FlatList
data={this.state.games}
extraData={this.state.games}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => <Text> Test: {item.id} </Text>}
/>
</View>
)
}
_loadGames() {
console.log("Search button game has been clicked")
getGamesFromApiWithSearchedText().then(data => {
this.setState({ games: data.results })
})
}
}
export default Search
//IGDB.js
export function getGamesFromApiWithSearchedText() {
const url = 'https://api-v3.igdb.com/games'
return fetch(url, {
method: 'POST',
headers: {
"user-key": API_TOKEN
},
body:
'fields id, name, release_dates, rating, game_engines, summary, involved_companies, genres; search "Witcher"; limit 1;'
})
.then(response => response.json())
.then(data => data)
.catch((error) => console.log(error))
}
//Warning I receive
[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'data.results')]
- node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
- node_modules\promise\setimmediate\core.js:123:25 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:194:17 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:407:6 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue