React Hook + 上下文 API答案

【问题标题】：React Hook + Context apiReact Hook + 上下文 API
【发布时间】：2020-11-03 11:25:14
【问题描述】：

我对 React Hooks 和 context api 还很陌生。我正在尝试在 react (no redux) 中创建全局状态管理，但我遇到了这个错误。

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

我刚开始这个项目，只是想建立一个购物车（它将使用全局 CartItem 来跟踪总项目）

GlobalStates.jsx（我的全局状态管理器文件）

import React from 'react';

export const CartContext = React.createContext(0)

const GlobalContextWrapper = (props) => {
    const [cartItem,incCartItem] = React.useState(0);
    return(
        <CartContext.Provider value={[cartItem,incCartItem]}>
            {props.children}
        </CartContext.Provider>
    )
}

export default GlobalContextWrapper

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import GlobalContextWrapper from "./GlobalStates.jsx"

import Test from "./Test.jsx"

const Main = () => {
    return(
      <GlobalContextWrapper>
        <Test/>
      </GlobalContextWrapper>
    )
}

ReactDOM.render(<Main/>,document.getElementById('root'));

Test.jsx（试图访问上下文全局状态的文件）

import React from 'react';
import CartContext from "./GlobalStates"

const Test = () => {
    const [cartItem,incCartItem] = React.useContext(CartContext)
    return(
        <h1>The cart total is {cartItem}</h1>
    )
}

export default Test

【问题讨论】：

标签： javascript reactjs react-hooks react-context

【解决方案1】：

您的代码运行良好，但在测试中您需要正确导入上下文：import {CartContext} from "./GlobalStates"

const CartContext = React.createContext(0);

const GlobalContextWrapper = (props) => {
  const [cartItem, incCartItem] = React.useState(0);
  return (
    <CartContext.Provider value={[cartItem, incCartItem]}>
      {props.children}
    </CartContext.Provider>
  );
};
const Test = () => {
  const [cartItem, incCartItem] = React.useContext(
    CartContext
  );
  return <h1>The cart total is {cartItem}</h1>;
};

const Main = () => {
  return (
    <GlobalContextWrapper>
      <Test />
    </GlobalContextWrapper>
  );
};

ReactDOM.render(<Main />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：