Объект не повторяется при использовании useContext - PullRequest
Новая
       6

Объект не повторяется при использовании useContext

0 голосов
/ 04 августа 2020

Я использую useContext для обновления счетчика, и все работало нормально, пока я не использовал его в новом компоненте. Теперь я получаю: объект не повторяется ошибка.

Я немного запутался, потому что тот же код работает с другими компонентами.

мой контекст: 

import { createContext } from "react";

const CartContext = createContext();
export default CartContext;

Provider : 

  const [cartValue, setCartValue] = useState(0);
  return (
    <div>
      <CartContext.Provider value={[cartValue, setCartValue]}>
        <Navigation />
        {children}
        <ToastContainer />
      </CartContext.Provider>
    </div>
  );

Работа над компонентом x: 

const [cartValue, setCartValue] = useContext(CartContext);

Не работает та же строка кода над компонентом y: 

const [cartValue, setCartValue] = useContext(CartContext);
//causing TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))

Я использую контекст в этих компонентах: ProductCard

Навигация

Корзина -> здесь не работает

1 Ответ

0 голосов
/ 04 августа 2020

Я не совсем уверен, почему вы получаете эту конкретную c ошибку, но я очень уверен, что вы используете useContext непреднамеренно.

Если вы посмотрите в документации useContext вы можете видеть, что он используется только для подписки текущего компонента на определенного провайдера.

useContext (MyContext) позволяет только читать контекст и подписываться на его изменения. Вам все еще нужен выше в дереве, чтобы предоставить значение для этого контекста.

«Реагировать» для этого будет следующим:

  1. сохранить cartValue в root компонент (не обязательно приложение root, но какое бы оно ни было "высокое")
  2. передать cartValue, хранящееся в root, поставщику контекста
  3. передать setCartValue для любого компонента, который должен иметь возможность изменять значение

Код должен быть примерно таким: 

const [cartValue, setCartValue] = useState(0);
  return (
    <div>
      <CartContext.Provider value={cartValue}>
        <Navigation />
           // inside AnyOtherComponent you have to use useContext
           <AnyOtherComponent handleCartChange={setCartValue}/>
        <ToastContainer />
      </CartContext.Provider>
    </div>
  );

Для получения дополнительных сведений см. Dynami c контексты .

...