Как сохранить ответ JSON от API IGDB в массив - PullRequest
Новая
       89

Как сохранить ответ JSON от API IGDB в массив

0 голосов
/ 19 июня 2020

Я новичок в JavaScript и начал делать мобильное приложение на React Native. Однако у меня возникли проблемы с IGDB API и «Fetch» ​​из MDN.

Я пытался сохранить ответ JSON в массив и распечатать его через FlatList. Однако он ничего не печатает, ни «Test:», ни «{item.id}», и я пытаюсь понять, проблема ли это в API или моем использовании FlatList.

Я попробовал свой запрос в Postman, и он работает.

Мой ответ правильно выводится в терминал, когда я делаю запрос к API.

Я покажу вам два основных JS файлов, но также и предупреждение, которое я получаю, когда получаю ответ от API.

Не сомневайтесь, если у вас есть вопросы, я отвечу максимально четко.

Спасибо за помощь 

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

Ответы [ 2 ]

0 голосов
/ 22 июня 2020

Я наконец решил свою проблему. Кажется, ".results" в функции "_loadGames ()" были причиной проблемы. Я удалил его, и теперь вроде все работает нормально.

Всем спасибо за помощь!

0 голосов
/ 19 июня 2020

Вы должны вернуть data из второго .then 

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

Вам нужно использовать свойство extraData для повторного рендеринга плоского списка при изменении состояния. Дополнительные данные - это то, что меняет, это может быть флаг, например isloading

<FlatList
   data={this.state.games}
   extraData={this.state.games}
   keyExtractor={(item) => item.id.toString()}
   renderItem={({ item }) => <Text> Test: {item.id}  </Text>}
/>
...