React Hooks useContext 不允许状态更改

Posted 2023-04-14

【中文标题】React Hooks useContext 不允许状态更改

【英文标题】：React Hooks useContext not allowing state change

【发布时间】：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 相关的内容，而且已经解决了，但是做得很好。

【参考方案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 >
  );
;