React Hook + 上下文 api

Question

我對 React Hooks 和上下文 api 相當陌生。 我正在嘗試在 react（無 redux）中創建全局 state 管理，但我遇到了這個錯誤。

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

我剛開始這個項目，只是想建立一個購物車（它將使用全局 CartItem 來跟蹤總項目）

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

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

Answer 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>