因此，我正在尝试使用 React 制作一个待办事项应用程序，我刚刚尝试使用 Context，但一直收到未定义不可迭代：

这是 Main/index.js：

import React,{useContext} from "react";
import { BrowserRouter as Router,Routes, Route, Link} from 'react-router-dom';
import {GlobalContext} from "../Context/provider.js"
import TodoForm from "../Todo-Form/index.js"
import Description from "../Description/index.js"
import "./style.css";

export default function Main () {

const {todos, setTodos} = useContext(GlobalContext);

const addTodo = text => {
    const newTodos = [...todos, { text }];
    setTodos(newTodos);
};

const completeTodo = index => {
    const newTodos = [...todos];
    newTodos[index].isCompleted = newTodos[index].isCompleted ? false : true;
    setTodos(newTodos);
};

这是 Context/provider.js：

import React from "react";
   import { useState,createContext } from "react";

   export const GlobalContext = createContext()

  export  const ContextProvider = ({children})=> {
    const [todos, setTodos] = useState([
        {
          text: "You can write your to-do above and add",
          isCompleted: false,
          description: "hello",
          id:0
        },
    ]);
    return(
       <GlobalContext.Provider value = {{todos, setTodos}} >
            {children}
       </GlobalContext.Provider>
    )
}

编辑已解决！！ 除了我的问题： const {todos, setTodos} = useContext(GlobalContext); 事实证明，我没有使用提供程序包装，因此当我在 app.js 中执行此操作时，它有效：

<ContextProvider>
  <div className="main-div">
    <Header />
    <Main />
  </div>

</ContextProvider>

感谢所有查看并提供一些解决方案的人。