Error while using React Context API: "TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))"

Question

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

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

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

这就是我创建上下文的方式（我简化了代码片段，但保留了与 [state, setState] 和上下文相关的所有内容）：

App.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]

Form.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/>
       )
}

Results.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}”，问题将得到解决。

Error while using React Context API: "TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))"