UseContext не повторяется - PullRequest
Новая
       8

UseContext не повторяется

1 голос
/ 24 сентября 2019

Я пытаюсь получить значение с помощью React Hook useContext, но постоянно получаю следующую ошибку: 

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

CartContext.js 

import React, {useState, createContext} from 'react';

export const CartContext = createContext();

export const CartProvider = (props) => {
  const [cart, setCart] = useState([]);
  return (
    <CartContext.Provider value={[cart, setCart]}>
      {props.children}
    </CartContext.Provider>
  )
}

И я пытаюсь добраться до него из Cart.js 

import React, {useContext} from 'react'
import {CartContext} from '../../pages/contact/CartContext';
import { slide as Menu } from 'react-burger-menu'
import './Cart.css'

export default function Cart() {
    const [cart, setCart] = useContext(CartContext); //This line causes the error
    return (
        <div>
            <Menu right width={350} 
                  isOpen={false} 
                  id={"testi"} className={ "my-menu" } 
                  customBurgerIcon={<i className="fa fa-shopping-cart" aria-hidden="true"/>}
                  burgerButtonClassName={ "cartButton" }>
                      <h1>Hello</h1>
                  </Menu>  
        </div>
    )
}

1 Ответ

1 голос
/ 24 сентября 2019

Кажется, все в порядке.См. Этот кодовый ящик:

https://codesandbox.io/s/eager-brattain-2zhxj

index.js 

import React from "react";
import ReactDOM from "react-dom";
import Cart from "./Cart";
import { CartProvider } from "./CartContext";

import "./styles.css";

function App() {
  return (
    <CartProvider>
      <Cart />
    </CartProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CartContext.js 

import React, { useState, createContext } from "react";

export const CartContext = createContext();

export const CartProvider = props => {
  const [cart, setCart] = useState(["a", "b"]);
  return (
    <CartContext.Provider value={[cart, setCart]}>
      {props.children}
    </CartContext.Provider>
  );
};

Cart.js 

import React, { useContext } from "react";
import { CartContext } from "./CartContext";

function Cart() {
  const [cart, setCart] = useContext(CartContext);

  function updateCart() {
    setCart(prevState => {
      const newState = Array.from(prevState);
      newState.push("c");
      return newState;
    });
  }

  return (
    <React.Fragment>
      <div>I am Cart</div>
      <div>Cart value: {JSON.stringify(cart)}</div>
      <button onClick={updateCart}>Add 'c' to cart</button>
    </React.Fragment>
  );
}

export default Cart;
...