Javascript 将阵列映射到组件在react中失败

我有一个MealList组件，它列出了一组膳食组件

const MealList = (props) => {
    console.log(props.meals);// [Array(3)]

    return (
        <div style={{width: '70%'}}>
            <h3 style={{color: 'grey', fontSize: '1.4em', fontWeight: '700', marginBottom: '1em'}}><FontAwesomeIcon
                icon={faPlusCircle} style={{color: '#007bff', marginRight: '0.5em'}}/> ADD MEAL</h3>
            <Table striped bordered hover>
                <thead>
                <tr>
                    <th>#</th>
                    <th>Meal</th>
                    <th>Calories</th>
                    <th>Time</th>
                    <th>Date</th>
                    <th>Update</th>
                    <th>Delete</th>
                </tr>
                </thead>
                <tbody>
                    {props.meals.map(meal => <Meal label={meal.label} calories={meal.calories} time={meal.time}
                                               date={meal.date}/>)}
                </tbody>
            </Table>
        </div>

    )
};
export default MealList;

虽然props值呈现为未定义，但在膳食组件内部

const Meal = (props) => {
    console.log(props.label, props.calories, props.time, props.data);//undefined ....

    return (<tr>
        <td>1</td>
        <td>{props.label}</td>
        <td>{props.calories}</td>
        <td>{props.time}</td>
        <td>{props.date}</td>
        <td><FontAwesomeIcon icon={faUserEdit}/></td>
        <td><FontAwesomeIcon icon={faMinusCircle}/></td>
    </tr>);
};
export default Meal;

const餐=（道具）=>{
console.log（props.label、props.carries、props.time、props.data）；//未定义。。。。
返回(
1.
{props.label}
{props.carries}
{props.time}
{props.date}
);
};
出口默认餐；

我做错了什么？

根据

[Array(3)]

您的

道具.餐点

不是对象数组，而是对象数组的数组（带有单个元素）

所以，虽然quickfix是

{props.meals[0].map(meal =>

---

最好检查一下为什么会有不同的结构，而不是你期望的那样。我建议如下：

• 在膳食列表组件中，在映射到props.fine之前，首先检查props.fine是否为null，否则显示消息或其他内容
• [array[3]]表示餐点有一个元素，它是由3个元素组成的数组，因此请尝试调整发送到餐点列表的数据的结构
• 试着向膳食组件发送一个膳食对象，而不是像mean.label、mean.date这样，这样就可以完全隔离可重用组件

---

您的代码运行良好，下次尝试提前添加可生产的示例时，需要1分钟30秒，您的用餐对象是什么样子的？您可以在

MealList

组件中记录

props.fines

并将输出粘贴到此处吗？我猜数据是在其他地方异步获取的，这就是失败的原因。它没有因为什么而崩溃，但您需要处理数组为空或不可用的初始状态，如

null

或

undefined

console.log（props.feeds[0]）

给出了

（3）[{…}，{…}，{…}，{…}]

但是当我尝试映射膳食[0]时，我得到了以下错误，

TypeError:无法读取未定义的属性“map”

您的最后一点是相当固执己见的，根据用例，这两种方法同样有效。在OP的代码中，

fine

组件呈现数据，而不管

fine

对象的结构如何。是的，这是绝对正确的，我提到的唯一建议是隔离fine组件，让每个组件只负责一件事

{props.meals[0].map(meal =>