Reactjs React Native-使用useState传递API响应数据时出现问题

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

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

我是不是错过了一些明显的东西？我正在学习使用React、states和hook。当我在axios.get调用之后在useResults.js中输入console.log（response.data）时，我得到了正确的JSON响应数据。然而，当我在TopCryptoList中使用console.log（results）时，我得到的是空对象，因此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>
    )  
}

---

}

您不能在平面列表中使用对象您需要根据响应创建一个数组您可以像这样编辑

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中，您可以只使用

项

而不是结果

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

从“React”导入React；
从“react native”导入{View，Text，FlatList，StyleSheet，TextBase}；
从“react navigation”导入{createAppContainer}；
从“../hooks/useResults”导入useResults；
常量TopCryptoList=（）=>{
const[searchCrypto，results]=useResults（）；
log（“我们有：+结果）；
返回(
项目id}
renderItem={（{item}）=>{
返回(
{item.name}
);
}}
/>
)  
}

---

我已经试过了，希望这能帮助您

您的回复可能无效。请阅读以下内容：我认为问题在于，当您收到回复时，扁平列表没有更新。尝试将结果保存到状态。嘿，感谢您澄清我的解决方案不起作用的原因。在您的帮助下，它就像一个符咒一样工作。请单击“True symbol”（真实符号）以最佳答案接受此问题✓

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