我的组件在通过数组传递道具时没有渲染

Question

我有一个对象数组，对象包含不同的内容，如id, title, price。我使用迭代数组的最新方式，每次我渲染我的组件，但是组件未呈现

{
basket.map(item => {
<CheckoutProduct
id={item.id}
title={item.title}
image={item.title}
price={item.price}
rating={item.rating}
/>
})
}

这里，basket是一个数组，我使用map函数迭代basket, CheckoutProduct是我的组件。

如果不调用数组内部的组件，它正在渲染，但在数组内部它不渲染。

当我做控制台日志的篮子的标题，id，价格，他们在控制台打印像这样{console.log(items[0])}这{console.log(items[0]?.title)}

唯一的问题是在我使用数组渲染它的时候。该怎么办?

Answer 1

跳过花括号，让你的代码看起来像这样:

{
basket.map(item => 
<CheckoutProduct
id={item.id}
title={item.title}
image={item.title}
price={item.price}
rating={item.rating}
/>
)
}

使得映射函数返回你的<CheckoutProduct>元素。否则map只是运行而不返回任何内容，因此没有任何内容被渲染。