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

【问题标题】：Nothing was return from render in renderItemrenderItem 中的渲染没有返回任何内容
【发布时间】：2021-02-24 11:29:24
【问题描述】：

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

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

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

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

我没有收到任何返回错误。我该怎么办？

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

【问题讨论】：

错误是什么？
渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null @SinanYaman
items 数组里面有什么？
<View> 标签内没有任何内容。这就是你想要的吗？
请分享您的问题的代码框链接。

标签： javascript reactjs react-native react-native-flatlist

【解决方案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 时将失败。

【讨论】：

感谢您的帮助，您是否建议我阅读任何文档以避免此类问题？ @LakshyaThakur
@Pavel Umm 这不是与 React 本身相关的问题，而是与 JS 相关的问题。所以我想说随着你的进步更好地了解它。这是一个很好的资源 - theavocoder.com/complete-javascript

【解决方案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 items.map

【讨论】：

它不会返回任何东西@AlistairNelson
它将返回从map 返回的内容，否则您实际上并没有从Item 返回任何内容，因此控制台中出现错误

【解决方案3】：

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

像这样使用 renderItem

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

【讨论】：

是的，它会起作用，但我的任务是使用带有数组 @HamasHassan 的 renderItem