renderItem 中的渲染没有 return

Question

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

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

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

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

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

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

Answer 1

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

像这样使用 renderItem

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

Answer 2

在你的 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 所以它是 return items.map

Answer 3

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

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

更改：-

return 来自 .map
return <View>...</View> 组件
删除 item && index 检查。当 index 等于 0.

renderItem 中的渲染没有 return

Nothing was return from render in renderItem

javascript

reactjs

react-native

react-native-flatlist