React Native - 使用 useState 传递 API 响应数据的问题

Question

I am trying to understand why my API response data is not showing up. I have tested with console.log that my response data is actually correct.

In my TopCryptoList.js component I am trying to show data on flatlist according to my API call response data. The results data is supposed to be coming from useResults.js file where the API call happens. For some reason I can't get the "results" data from useResults.js to my TopCryptoList.js component.

Am I missing here something obvious? I am just learning to use React and states and hooks. When I console.log(response.data) in the useResults.js just after the axios.get call I get the correct JSON response data. However when I console.log(results) in my TopCryptoList I get empty object and therefore Flatlist can't render anything visible.

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];

}

Answer 1

You cannot use object in Flatlist you need to create an array from your response u can edit the searchCrypto function like this:

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

At last in renderItem u can use just item instead of result

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

I have tried it works, hope this will help you