React Native中使用map渲染列表值遇语法错误，求解决方法

你的代码存在几处关键问题，直接修改后的可用代码如下：

import React from "react";
import { View, Text, StyleSheet } from "react-native";

const BadFood = ({ ingredients = [] }) => {
  return (
    <View>
      <Text>Bad Ingredients</Text>
      {ingredients.map((ing, index) => (
        <View key={index}>
          <Text>{ing}</Text>
        </View>
      ))}
    </View>
  );
};

错误原因及修复说明： #

• 组件Props接收方式错误：React组件的参数是一个Props对象，不能直接写(ingredients)，需要通过解构({ ingredients })获取传入的食材列表，或者写成(props) => props.ingredients来访问。
• 缺少列表元素的Key属性：React要求循环渲染的列表元素必须带有唯一key属性，这里用循环索引index作为临时方案（如果食材本身有唯一ID，优先使用该ID作为key）。
• 空值防护处理：给ingredients设置默认空数组= []，避免传入的食材列表为undefined或null时触发报错。
• 语法格式不规范：原代码中JSX的括号、换行格式存在问题，调整后符合React代码规范，可消除语法检查的红色波浪线。

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