将对象数组传递给useState会引发此错误.对象作为React子对象无效(已找到:键为｛id，name｝的对象)

Question

我正在学习React Context API。我创建了一个名为CartDataContext的上下文。在提供程序中，当我使用useState并传递一个对象数组(如[｛id:1，name："Item One"｝](时，会引发此错误->对象作为React子对象无效(找到：键为｛id，name｝的对象(。如果要渲染子对象的集合，请改用数组。

以下是CartContext.js代码

import React, { useState, createContext, useMemo } from 'react';
export const CartDataContext = createContext();
export const CartDataProvider = props => {
const [cart, setCart] = useState([{id:1, name:"Item One"}]);
return(
<div>
<CartDataContext.Provider value={[cart, setCart]}>
{ props.children }
</CartDataContext.Provider>
</div>

)
}

在App.js中，这就是我在上下文中包装组件的方式

<CartDataProvider>
<Route path="/test" component={TestComponent} />
</CartDataProvider>

这是TestComponent.js文件代码

import React, { useContext } from 'react';
import { Button, Container } from 'reactstrap';
import { CartDataProvider } from '../contexts/CartContext';

const TestComponent = () => {
const [cart, setCart] = useContext(CartDataProvider);
const handleClick = () => {
const item = {id: '3', name: "item 2"};
setCart( prevCart => [...prevCart, item]); 
}
return (
<div className="my-4">
<Container>
<h4>Test Component</h4>
<p>Cart Context Value: {cart}</p>
<Button onClick={handleClick}>Update Cart Context</Button>
</Container>

</div>
)
}
export default TestComponent;

这是错误的屏幕截图https://snipboard.io/t0VhZI.jpg

请帮我

Answer 1

因为您的{cart}是对象的array。因此，与其这样渲染，不如将它们封装在某种.map或其他东西中：-

<div className="my-4">
<Container>
<h4>Test Component</h4>
{cart.map(c => <p key={c.id}>Cart Context Value: {c.name}</p>)}
<Button onClick={handleClick}>Update Cart Context</Button>
</Container>        
</div>

此处为参考的沙箱