将对象推送到状态为 React ERROR(对象无效..)的数组

Question

我是新手反应，如何正确将对象添加到处于某种状态的数组中，我收到错误："错误：对象作为 React 子项无效(找到：带有键 {product} 的对象(。如果要呈现子项的集合，请改用数组。我能做的是每次单击按钮时将对象推送到列表中？

import React, { useContext, useState } from 'react'
import {SnacksContext} from './Snacks'
import AddtoCart from './AddToCart'
const SnackItem=()=>{
const [snacks,setSnack]=useContext(SnacksContext)
const [list,setList]=useState([])
return(
<div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(200px,1fr))"}}>
{snacks.map(i=>(
<div>
<img src={i.picture}></img>
<h1>{i.product}</h1>
<h2>{i.price}</h2>
<button onClick={()=>setList(list=>[...list,i])}>buy</button>
</div>
))}
</div>
)

Answer 1

Objects are not valid as a React child (found: object with keys {product}).

对于错误，很明显snacks是一个对象数组，其中product是一个键，它是一个对象。您正在尝试渲染一个对象 - 像这样 -<h1>{i.product}</h1>.

因此，请参阅i.product的属性并相应地呈现它。例如：i.product.title

<div>
<img src={i.picture}></img>
<h1>{i.product.title}</h1> //<---- see here
<h2>{i.price}</h2>
<button onClick={()=>setList(list=>[...list,i])}>buy</button>
</div>