React Hooks useContext 不允许 state 更改

Question

I am using a global state with useContext in React Hooks and get the following error:

"Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method."

I want to access and update the state from the context.

My App.js:

import { Cart } from "./Cart"

const App = () => {

  const [cartTotal, setCartTotal] = useState('0');

  return (<BrowserRouter>

    <Switch>

      <Cart.Provider value={{ cartTotal, setCartTotal }}>
        <Route exact path="/" component={Home} />
        <Route exact path="/payment" component={Payment} />
      </Cart.Provider>

    </Switch>
  </BrowserRouter >)
}

My Cart.js (for creating the context):

import { createContext } from "react"

export const Cart = createContext(null) // tried "[[], () => { }]" here instead of null

My Home.js (for accessing the context):

import { Cart } from '../Cart'

const { cartTotal, setCartTotal } = useContext(Cart)

I cant render right now, something about the object React doesn't like, any ideas?

Thanks

Answer 1

You were close in the initial value for the cart context. It should match the types of the context value you later pass in the provider. Your context value is an object with cartTotal and setCartTotal keys, and the value types are string and function, respectively.

const Cart = createContext({
  cartTotal: '',
  setCartTotal: () => {},
});

See Updating context from a nested component

Additionally, you will want to render the Switch within the provider so it is directly rendering the Route components.

const App = () => {
  const [cartTotal, setCartTotal] = useState('0');

  return (
    <BrowserRouter>
      <Cart.Provider value={{ cartTotal, setCartTotal }}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/payment" component={Payment} />
        </Switch>
      </Cart.Provider>
    </BrowserRouter >
  );
};