React Native - проблема с передачей данных ответа API с использованием useState - PullRequest
Новая
       20

React Native - проблема с передачей данных ответа API с использованием useState

2 голосов
/ 09 января 2020

Я пытаюсь понять, почему мои данные ответа API не отображаются. Я протестировал с console.log, что мои данные ответа на самом деле верны.

В моем компоненте TopCryptoList. js я пытаюсь отобразить данные в плоском списке в соответствии с моими данными ответа на вызов API. Предполагается, что данные результатов поступают из файла useResults. js, где происходит вызов API. По какой-то причине я не могу получить данные "результатов" из useResults. js в свой компонент TopCryptoList. js.

Я что-то упускаю здесь из-за чего-то очевидного? Я только учусь использовать React и состояния и ловушки. Когда я console.log (response.data) в useResults. js сразу после вызова ax ios .get, я получаю правильные JSON данные ответа. Однако, когда я вижу console.log (результаты) в своем TopCryptoList, я получаю пустой объект, и поэтому Flatlist не может отобразить ничего видимого.

TopCryptoList. js: 

import React from 'react';
import { View, Text, FlatList, StyleSheet, TextBase } from 'react-native';
import { createAppContainer } from 'react-navigation';
import useResults from '../hooks/useResults';

const TopCryptoList = ( ) => {

    const [searchCrypto, results] = useResults();

    console.log("THIS WE HAVE: " + results);

    return (
        <View style={styles.container}>
            <FlatList
                showsVerticalScrollIndicator={false}
                data={ results }
                keyExtractor={( result ) => result.id}
                renderItem={({ result }) => {
                    return (
                        <Text style={styles.item}>{result.name}</Text>
                    );
                }}
            />
        </View>
    )  
}

useResults. js: 

import { useEffect, useState } from 'react';
import axios from 'axios';

export default () => {

const [results, setResults] = useState([]);

const options = {
    method: 'GET',
    params: {
        'id': '1,2'
    },
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json;charset=UTF-8',
        'X-CMC_PRO_API_KEY': 'my api key'
    },
    json: true,
    gzip: true
  };

const searchCrypto = async () => {
    try {
        const response =  await axios.get('https://pro- 
                          api.coinmarketcap.com/v1/cryptocurrency/quotes/latest', options);
        setResults(response.data);
    } catch (error) {
        console.log(error);        
    }
}

useEffect(() => {
    searchCrypto();
}, [])

return [searchCrypto, results];

}

1 Ответ

1 голос
/ 10 января 2020

Вы не можете использовать объект в Flatlist, вам нужно создать массив из вашего ответа. Вы можете отредактировать функцию searchCrypto следующим образом:

useResults. js

const searchCrypto = async () => {
    try {
        const response =  await axios.get('https://pro- 
                          api.coinmarketcap.com/v1/cryptocurrency/quotes/latest', options);

        const newArr = [];
        Object.keys(response.data.data).map( (key,index)=>{

            newArr.push(response.data.data[key]);
        });

        // console.log(newArr)
         setResults(newArr)

    } catch (error) {
        console.log(error);        
    }
}

В последний в renderItem вы можете использовать только item вместо результата 

import React from 'react';
import { View, Text, FlatList, StyleSheet, TextBase } from 'react-native';
import { createAppContainer } from 'react-navigation';
import useResults from '../hooks/useResults';

const TopCryptoList = ( ) => {

    const [searchCrypto, results] = useResults();

    console.log("THIS WE HAVE: " + results);

    return (
        <View style={styles.container}>
            <FlatList
                showsVerticalScrollIndicator={false}
                data={ results }
                keyExtractor={( item) => item.id}
                renderItem={({ item}) => {
                    return (
                        <Text key={ item.id } style={styles.item}>{item.name}</Text>
                    );
                }}
            />
        </View>
    )  
}

Я пробовал это работает, надеюсь, это поможет вам

...