React：子组件无法使用 Props 接收多个映射数据

Question

我是新手。我想创建一个简单的反应网络应用程序，它从 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 属性 '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

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

Answer 1

您需要将 props key={item.id} item={item} 传递给子 FruitItem 组件。如果您不能将任何 props 传递给 FruitItem 组件，React 将无法识别 item.name。这将是一个类型错误。

Answer 2

这是因为你的FruitItem总是期待一个项目被交上去

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

但是你交图片的时候，并没有你设置的item。

Answer 3

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

中未定义图像

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

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

Answer 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 仅当该项目存在时。

React：子组件无法使用 Props 接收多个映射数据

React: Child Components Failed to Receive Multiple Mapped Data Using Props

javascript

reactjs

api

react-props

react-component