React中使用CreateContext管理状态遇错：export语句错误排查求助

你的错误出现在代码最后一行的导出语句上：

export UserContext.createContext('');

错误原因 #

1. 你已经在代码顶部通过const UserContext = createContext();创建好了上下文对象，不需要再重复调用createContext方法
2. 该行的导出语法完全错误，正确导出已创建的UserContext不需要额外调用方法

修复步骤 #

删除最后一行错误的导出代码，替换为正确的导出语句：

export { UserContext };

修正后的完整代码 #

import { createContext, useState } from "react";
import Header from "./components/Header";
import Tasks from "./components/Tasks";

const UserContext = createContext();

function App() {
  const [tasks, setTask] = useState([
    {
      id: 1,
      text: "Doctors Appointment",
      day: "Feb 5th at 2.30pm",
      reminder: true,
    },
    {
      id: 2,
      text: "Meeting at School",
      day: "Feb 6th at 1.30pm",
      reminder: true,
    },
    {
      id: 3,
      text: "Food Shopping",
      day: "Feb 5th at 1.30pm",
      reminder: false,
    },
  ]);

  //Delete Task
  const deleteTask = (id) => {
    setTask(tasks.filter((task) => task.id !== id));
  };

  return (
    <UserContext.Provider value={{ tasks, setTask }}>
      <div className="container">
        <Header />
        <Tasks onDelete={deleteTask} />
      </div>
    </UserContext.Provider>
  );
}
export default App;
export { UserContext };

修改完成后，你就可以在子组件中通过useContext(UserContext)来获取上下文里的tasks和setTask状态与方法了。

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