Question

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

以下是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>

这里sandbox供参考

将对象数组传递给useState会引发此错误对象作为React子对象无效（找到：带有键{id，name}的对象）

1 个答案: