Question

我有数据 - 包含项目的数组（重要）数组，并尝试创建平面列表：

  <FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={(item) => item.id}
  />

所以当我像这样在 renderItem 中映射项目时：

  items.map((item, index) => {
      return (
        <View style={styles.item} key={index}>
        </View>
      );
  });

我收到了Nothing is return错误。我该怎么办？

埃德。 https://snack.expo.io/@komarnytskiyivan/gnarly-waffle - 代码沙箱

Answer 1

您需要像这样更改您的 Item 组件：-

const Item = ({ items }) => {
  return items.map((item, index) => {
      return (<View style={styles.item} key={index}>
        <Text style={styles.title}>{item.title}</Text>
      </View>);
  });
};

变化：-

从 .map 返回新数组
返回 <View>...</View> 组件
删除 item && index 检查。当 index 等于 0 时会失败。

Answer 2

<FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={(item) => item.id}
  />

像这样使用renderItem

    renderItem = ({ item }) => {
     
        return (
          <View style={styles.item} key={index}>
           // Your view here
            </View>
        );
      };

Answer 3

在您的 Item 中，您有：

const Item = ({ items }) => {
  console.log(items);
  items.map((item, index) => {
    console.log(item)
    if (item && index) {
      return (
        <View style={styles.item} key={index}>
          <Text style={styles.title}>{item.title}</Text>
        </View>
      );
    }
  });
};

您需要从 items.map 返回所以它是 return items.map

renderItem 中的渲染没有返回任何内容

3 个答案: