React Native FlatList不渲染求助，代码无明显语法错误

你的FlatList无法渲染内容，核心是三个细节错误，逐个修正即可解决：

1. 初始化state为数组 #

useState()默认初始值是undefined，而FlatList要求data必须是数组类型，所以初始化时要设为空数组：

const [data, setData] = useState([]);

2. 正确提取axios返回的数据 #

axios请求返回的是响应对象，接口返回的真实数据嵌套在response.data字段里，你之前把整个响应对象赋值给了state，导致data不是FlatList需要的数组结构：

const response = await axios.get("https://fakestoreapi.com/products");
setData(response.data); // 取响应对象里的data字段

3. 给父容器设置高度并添加keyExtractor #

FlatList需要明确的布局高度才能渲染，给外层View加上flex:1；同时FlatList推荐添加keyExtractor指定唯一标识，避免性能警告：

return (
  <View style={styles.container}> {/* 使用定义好的container样式，包含flex:1 */}
    <FlatList
      data={data}
      keyExtractor={(item) => item.id.toString()} // 用商品id作为唯一key
      renderItem={({ item }) => (
        <Card>
          <Card.Cover source={{ uri: item.image }} />
          <Card.Content style={{ margin: 19 }}>
            <Text variant="titleLarge">{item.title}</Text>
          </Card.Content>
        </Card>
      )}
    />
  </View>
);

完整修正后的代码 #

import axios from "axios";
import React, { useEffect, useState } from "react";
import { View, StyleSheet, FlatList } from "react-native";
import { Card, Text } from "react-native-paper";

function Home() {
  const [data, setData] = useState([]);
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get("https://fakestoreapi.com/products");
        setData(response.data);
      } catch (error) {
        console.log(error);
      }
    }
    fetchData();
  }, []);

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <Card>
            <Card.Cover source={{ uri: item.image }} />
            <Card.Content style={{ margin: 19 }}>
              <Text variant="titleLarge">{item.title}</Text>
            </Card.Content>
          </Card>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});

export default Home;

内容的提问来源于stack exchange，提问作者Mohammad Ali