React Hooks useContext 不允许状态更改答案

【问题标题】：React Hooks useContext not allowing state changeReact Hooks useContext 不允许状态更改
【发布时间】：2021-06-16 08:31:01
【问题描述】：

我在 React Hooks 中使用带有 useContext 的全局状态并得到以下错误：

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

我想从上下文中访问和更新状态。

我的 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 >)
}

我的 Cart.js（用于创建上下文）：

import { createContext } from "react"

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

My Home.js（用于访问上下文）：

import { Cart } from '../Cart'

const { cartTotal, setCartTotal } = useContext(Cart)

我现在无法渲染，关于 React 不喜欢的对象，有什么想法吗？

谢谢

【问题讨论】：

将 import React from 'react' 添加到每个文件
还将 import {useContext} from 'react' 添加到 Home.js
还将 import {useState} from 'react' 添加到 App.js。我希望你只是没有在这里粘贴所有导入，因为还有很多其他的错过:)
不仅发布了与 useContext 相关的内容，而且已经解决了，但是做得很好。

标签： javascript reactjs global use-context

【解决方案1】：

您接近购物车上下文的初始值。它应该与您稍后在提供程序中传递的上下文值的类型相匹配。你的上下文值是一个带有cartTotal和setCartTotal键的对象，值类型分别是字符串和函数。

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

见Updating context from a nested component

此外，您需要在提供程序中呈现 Switch，以便它直接呈现 Route 组件。

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 >
  );
};

【讨论】：