Блог

Я изучаю контекстный API React. Я создал контекст с именем 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

Пожалуйста, помогите мне

Это потому, что ваш {cart} объект является array объектом of. Поэтому вместо того, чтобы отображать его таким образом, вам нужно заключить их в какой .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>
  

здесь песочница для справки