我正试图从"js"通过使用上下文API可用于所有子组件。我已经成功地对大多数组件做到了这一点，但当我试图在组件树中更深入地使用它时，它意外地给了我这个错误：
"TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))"
我不明白为什么上下文对于某些组件是可访问的，而对于其他组件则不可访问，因为它们都是由context.Provider.包装的
这就是我创建Context的方式(我简化了代码片段，但保留了与[state，setState]和Context相关的所有内容(：
应用程序.js
export const Context = React.createContext();
function App() {
const [state, setState] = useState({
step: 0,
})
return (
<Context.Provider value={[state, setState]}>
<ThemeProvider theme={theme}>
<div className="app">
<BrowserRouter>
<Routes>
<Route exact path="/" element={<Home />} />
</Routes>
</BrowserRouter>
</div>
</ThemeProvider>
</Context.Provider>
);
}
export default App;在那之后，我不再直接在"；主页"；组件，但我正在Home.jsx渲染的Form组件中使用它，它运行得很好。Form组件通过switch语句呈现子级，其直接子级可以通过使用useContext((访问[state，setState]；
表单.jsx
import Step0 from "./Step0";
import Step1 from "./Step1";
import {useContext} from "react";
import { Context } from "../../App";
export default function Form () {
const [state, setState] = useContext(Context);
const nextStep = (e) => {
e.preventDefault();
setState({
...state,
step: state.step + 1
})
}
const prevStep = (e) => {
e.preventDefault();
// console.log(state);
setState({
...state,
step: state.step - 1
})
}
switch(state.step) {
case 1:
return (
<Step0 nextStep={nextStep} />
)
case 2:
return (
<Step1 nextStep={nextStep} prevStep={prevStep}/>
)
default:
return (
<h1>default</h1>
)
}
}useContext((在中正常工作，并且组件和[state，setState]都可以访问。
然而，当组件从渲染时，我得到了上面提到的错误
步骤1.jsx
import React, { useContext } from "react";
import { Context } from "../../App";
import Results from "./Results";
export default function Step1() {
const [state, setState] = useContext(Context);
return (
<ResultsEquals/>
)
}结果.jsx
import { useContext } from "react";
import Context from "../../App";
export default function Results() {
const [state, setState] = useContext(Context);
return (
<h1>{state.step}</h1>
)
}我解决了它。我只需要导入"上下文"；在消费者组件中，作为带括号的｛Context｝，并解决了它。
如果您编写"｛上下文｝"；使用大括号代替"；上下文"；在Results.jsx文件中导入时，问题就会得到解决。