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

Question

我试图理解为什么我的API响应数据没有显示出来。我已经用console.log测试了我的响应数据是否正确。

在我的TopCryptoList.js组件中，我试图根据我的API调用响应数据在平板列表上显示数据。结果数据应该来自发生API调用的useResults.js文件。出于某种原因，我无法从useResults.js获取“结果”数据到我的TopCryptoList.js组件。

我是不是错过了什么明显的东西？我只是在学习使用React、状态和钩子。当我console.log（response.data）在useResults.jsaxios.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];

}

Answer 1

你不能在Flatlist中使用对象，你需要从你的响应中创建一个数组，你可以像这样编辑search chCrypto函数：

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中，你可以只使用项目而不是结果

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

我已经试过了它管用希望这对你有帮助