React+Next.js待办项目报Cannot read property '_context' of undefined如何解决

你有两处需要修改的错误点：

1. TodoForm.js 中 useContext 使用不符合规范 #

useContext() 钩子必须接收你创建的 TodoContext 作为参数，才能正确拿到 Provider 中传递的值，同时你还没有在 TodoForm.js 中导入 TodoContext，两个问题叠加触发了本次报错。

修改后的 TodoForm.js 代码： #

import { addDoc, collection, serverTimestamp } from "@firebase/firestore";
import { useContext, useState } from "react";
import { db } from "../firebase";
// 新增导入TodoContext，路径请根据你实际的项目文件结构调整，确保指向TodoContext.js文件
import TodoContext from "../pages/TodoContext";

const TodoForm = () => {
  const [todo, setTodo] = useState({ title: "", detail: "" });
  // 给useContext传入TodoContext参数
  const { showModal } = useContext(TodoContext);

  const onSubmit = async () => {
    const collectionRef = collection(db, "todos");
    const docRef = await addDoc(collectionRef, {
      ...todo,
      timestamp: serverTimestamp(),
    });
    setTodo({ title: "", detail: "" });

    showModal(
      "bg-blue-200",
      `Todo with id ${docRef.id} is added successfully! `
    );
  };

  return (
    <div className="flex w-3/6 flex-col justify-center mt-6">
      <pre>{JSON.stringify(todo)}</pre>
      <input
        id="title"
        type="text"
        placeholder="Title"
        value={todo.title}
        onChange={(e) => setTodo({ ...todo, title: e.target.value })}
      />
      <input
        id="detail"
        type="text"
        placeholder="Detail"
        value={todo.detail}
        onChange={(e) => setTodo({ ...todo, detail: e.target.value })}
      />
      <button
        type="button"
        onClick={onSubmit}
      >
        ADD A NEW TODO
      </button>
    </div>
  );
};

export default TodoForm;

2. Modal 组件 props 名称不匹配 #

你在 index.js 里给 Modal 传递的属性是 setOpen，但是 Modal 组件内部定义接收的属性是 setOpenClick，名称不一致会导致后续关闭弹窗时报错，任选以下一种方案统一名称即可：

• 方案一：修改 index.js 中 Modal 的传参，将 <Modal setOpen={setOpen} alertMessage={alertMessage} open={open} /> 改为 <Modal setOpenClick={setOpen} alertMessage={alertMessage} open={open} />
• 方案二：修改 Modal 组件的入参，把组件内所有的 setOpenClick 替换为 setOpen

修改完成后即可正常运行。

内容的提问来源于stack exchange，提问作者Uhney