React Native中FlatList内容不显示问题求助

你的FlatList不显示内容，核心问题是组件接收props的方式错误：

你在父组件里通过data={shoppingItem}传递数组，但ShoppingCart组件的参数其实是一个完整的props对象，而不是直接的数组值。你现在把整个props对象传给了FlatList的data属性，FlatList拿到的不是数组，自然无法渲染列表项。

错误代码的问题点 #

原组件代码中：

const ShoppingCart = (shoppingItem) => {
  // 这里的shoppingItem是props对象，结构为 { data: [你的数组] }
  return (
    <View>
      <FlatList
        data={shoppingItem} // 错误：传入了props对象而非数组
        renderItem={({ item }) => {
          return (
            <View>
              <Text>{item.title}</Text>
            </View>
          );
        }}
      ></FlatList>
    </View>
  );
};

修改方案 #

有两种简单的修正方式：

方式一：解构props直接取出data

const ShoppingCart = ({ data }) => {
  return (
    <View>
      <FlatList
        data={data} // 正确使用传递过来的数组
        renderItem={({ item }) => (
          <View>
            <Text>{item.title}</Text>
          </View>
        )}
        keyExtractor={(item, index) => index.toString()} // 建议添加，避免React警告
      />
    </View>
  );
};

方式二：通过props对象访问data属性

const ShoppingCart = (props) => {
  return (
    <View>
      <FlatList
        data={props.data} // 正确获取props中的数组
        renderItem={({ item }) => (
          <View>
            <Text>{item.title}</Text>
          </View>
        )}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );
};

修改后FlatList就能正确接收到数组，渲染出对应的列表内容了。

内容的提问来源于stack exchange，提问作者Tibo Mertens