React Native中如何将数组内对象的值正确渲染到FlatList中？

你的代码核心问题是FlatList的renderItem箭头函数没有返回JSX元素，导致页面无内容显示。

问题原因 #

当箭头函数使用大括号{}包裹代码块时，必须显式使用return语句返回要渲染的元素；如果省略大括号，箭头函数会隐式返回紧跟的表达式。你的代码里用了大括号但没写return，所以默认返回undefined，自然看不到内容。

修正方案 #

有两种方式可以修复：

方式1：添加显式return

<View>
  <FlatList
    data={Reviews}
    renderItem={({ item }) => {
      return (
        <View>
          <Text>{item.name}</Text>
        </View>
      );
    }}
  />
</View>

方式2：使用箭头函数隐式返回

去掉大括号，直接将JSX作为箭头函数的返回值：

<View>
  <FlatList
    data={Reviews}
    renderItem={({ item }) => (
      <View>
        <Text>{item.name}</Text>
      </View>
    )}
  />
</View>

额外优化建议 #

为了避免React Native控制台的警告，建议给FlatList添加keyExtractor属性，给每个列表项提供唯一标识：

<FlatList
  data={Reviews}
  // 如果name字段唯一，也可以用(item) => item.name
  keyExtractor={(item, index) => index.toString()}
  renderItem={({ item }) => (
    <View>
      <Text>{item.name}</Text>
    </View>
  )}
/>

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