React：子组件使用 Props 接收多个映射数据失败答案

【问题标题】：React: Child Components Failed to Receive Multiple Mapped Data Using PropsReact：子组件使用 Props 接收多个映射数据失败
【发布时间】：2021-07-23 04:53:17
【问题描述】：

我是新来的反应。我想创建一个简单的 React Web 应用程序，从 2 个 api 接收数据，并显示数据。

我有三个组件。 App.js 从两个 api 接收数据，并使用 hooks 和 props 将数据传递给 FruitGrid.js。 FruitGrid.js 映射接收到的两个数据，并传递给 FruitItem。

我的问题在于 FruitGrid.js。在 FruitGrid.js 中接收数据，我可以通过控制台日志查看或使用 html 标签打印。但是当我尝试通过将h1标签更改为<FruitItem></FruitItem>将映射数据发送到FruitItem.js时，我只能成功传递一个数据，而不是两个。

FruitGrid.js

import React from 'react';
import FruitItem from './FruitItem';


const FruitGrid = ({ items, images, isLoading }) => { 

    return isLoading ? (
        <h1>Loading...</h1>
    ) : (
        <section>
        {items.map((item) => {
            return <FruitItem key={item.id} item={item}></FruitItem>

        })}

        {images.map(image => {
            return <FruitItem key={image.id} image={image}></FruitItem>
            // return <h1>{image}</h1>
        })}

        </section>
    )    

}

export default FruitGrid;

如果我只做return <FruitItem key={item.id} item={item}></FruitItem>，项目数据将以正确的布局显示，图像不会显示，因为我没有通过。但如果我尝试使用<FruitItem></FruitItem> 传递项目和图像。它会在 FruitItem 中显示错误“TypeError: Cannot read property 'name' of undefined”。

FruitItem.js

import React from 'react'

const FruitItem = ({ item, image }) => {

    return (
        <div className='card'>
            <div className='card-inner'>
                <div className='card-front'>
                    <img src={image} alt='' />
                </div>
                <div className='card-back'>
                    <h1>{item.name}</h1>
                    <ul>
                </ul>
                </div>
            </div>          
        </div>
    )
}

export default FruitItem

有人可以帮忙告诉我如何解决吗？

【问题讨论】：

标签： javascript reactjs api react-props react-component

【解决方案1】：

您需要将 props key={item.id} item={item} 传递给子 FruitItem 组件。如果您无法将任何道具传递给 FruitItem 组件，react 将无法计算出item.name。这将是一个 TypeError。

【讨论】：

【解决方案2】：

这是因为你的 FruitItem 总是希望有一个物品被提交

<h1>{item.name}</h1>

但是当你交出你的图片时，并没有你设置的项目。

【讨论】：

【解决方案3】：

您正在分别迭代两个数据源，因此您的images.map 中未定义项目，items.map 中未定义图像

为了合并，假设数据的顺序相同/键在两种情况下都相同，你可以这样做：

{items.map((item, key) => {
    return <FruitItem key={item.id} item={item} image={images[key]}></FruitItem>
})}

【讨论】：

谢谢！！这就是我要找的！我正在寻找如何将两个数据源映射在一起。

【解决方案4】：

嘿@yywhocodes 这是因为 FruitItem.js 总是期待一个 item 对象，而您的图像映射代码没有提供项目对象 -> return <FruitItem key={image.id} image={image}></FruitItem>

你可以做的是改变 FruitItem.js

来自 <h1>{item.name}</h1>

到 { item ? <h1>{item.name}</h1> : null }

只有当项目存在时，它才会尝试呈现 item.name。

【讨论】：