React Hooks useContext不允许状态更改

Question

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

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

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

我的应用程序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不喜欢的对象有什么想法吗？

感谢

Answer 1

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

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

请参阅从嵌套组件更新上下文

此外，您将希望在提供程序中呈现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 >
);
};