Json 我无法将来自 API 的数据显示到 FlatList 中，但我在 console.log 中看到了它.问题是什么

发布于12月21日

控制台记录我的Reaction原生应用程序，显示我从API获取的数据.现在的问题是它没有显示在FlatList中.

const HealthLinkMain = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get(API_URL, {
                    method: "GET",
                    headers: {
                        Authorization: `Bearer ${TOKEN}`,
                    },
                });
                setData(response.data)
            } catch (error) {
                console.error(error);
            }
        };

        fetchData();
    }, []);
    return (
        <View style={styles.container}>
            <Text>Test</Text>
            <FlatList
                data={data.data}
                renderItem={(item) => (
                    <View>
                        <Text>{item.clinic_name}</Text>
                        <Text>{item.clinic_address}</Text>
                    </View>
                )}
                keyExtractor={(item, index) => item.clinic_name}
            />
        </View>
    );
};

推荐答案

我认为问题可能出在您的renderItem中，因为您尚未对项目进行解构，请try 如下所示:

    renderItem = {({ item }) => {
       return (
        <View>
            <Text>{item.clinic_name}</Text>
            <Text>{item.clinic_address}</Text>
        </View>
       )
    }}

您还可以将其renderItem分离为它自己的函数，这是许多人倾向于做的:

const renderItem = ({item}) => {
     return(
            <View>
                <Text>{item.clinic_name}</Text>
                <Text>{item.clinic_address}</Text>
            </View>
     )
}

然后相应地更改扁平列表调用函数:

            <FlatList
                data={data.data}
                renderItem={renderItem}
                keyExtractor={(item, index) => item.clinic_name}
            />