使用 React Context API 时出错：“TypeError：Object 不可迭代（无法读取属性 Symbol（Symbol.iterator））”

Question

我正在尝试通过使用上下文 API 使“App.js”中的 [state, setState] 可用于所有子组件。 对于大多数组件，我已经成功地做到了这一点，但是当尝试在组件树中更深入地使用它时，它意外地让我返回了这个错误：

"TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))"

我不明白为什么某些组件可以访问上下文而其他组件不能访问上下文，因为它们都由 Context.Provider 包装。

这就是我创建上下文的方式（我已经简化了代码片段，但留下了与 [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”组件中使用它，而是在 Home.jsx 呈现的 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] 是可访问的。

但是，从渲染组件时出现上述错误

Step1.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> ) }

Answer 1

我解决了。 我只需要将消费者组件中的“上下文”导入为带括号的 {Context} 即可解决。

Answer 2

如果您在 Results.jsx 文件中导入时使用花括号而不是“Context”来编写“{Context}”，那么问题将得到解决。