React Native中FlatList无法渲染文本列表问题求助

你的代码里有几个明显错误导致FlatList无法渲染数据，逐一修正如下：

1. 食材数组元素未加引号 #

const ingredients = [chicken, butter, oil] 里的chicken、butter、oil会被当作未定义变量，而非字符串。必须给每个元素添加引号：

const ingredients = ["chicken", "butter", "oil"]

2. FlatList的renderItem参数解构错误 #

FlatList的renderItem回调接收的对象中，当前项的默认属性名是item，不是你自定义的recName。需要改成正确的解构方式：

renderItem={({ item }) => (
  <Text>{item}</Text>
)}

3. 启用keyExtractor（可选但推荐） #

虽然FlatList会自动生成key，但显式指定keyExtractor能避免控制台警告，符合React最佳实践。取消注释并修正参数：

keyExtractor={(item) => item}

完整修正后的代码 #

const ingredients = ["chicken", "butter", "oil"]

const DisplayRec = ({ ingredients }) => {
  return (
    <View style={styles.container}>
      <Text>Your Recipes</Text>
      <FlatList
        keyExtractor={(item) => item}
        data={ingredients}
        renderItem={({ item }) => (
          <Text>{item}</Text>
        )}
      />
    </View>
  );
};

额外提醒：如果该组件被其他组件调用，要确保正确传入ingredients属性，比如：

<DisplayRec ingredients={ingredients} />

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