如何将 useState 函数从上下文传递到组件中？答案

【问题标题】：How do I pass a useState function into a component from context?如何将 useState 函数从上下文传递到组件中？
【发布时间】：2023-04-02 02:23:01
【问题描述】：

我正在尝试在我的上下文和提供程序文件中创建一个 useState 函数，以便它可以在多个组件中使用。我之前在其他代码中使用过这个，但在这里似乎不起作用。

StudentContext.ts

import { createContext } from "react";
import Student from "../models/Student";

export interface StudentContextModel {
  students: Student[];
  setStudents: (students: Student[]) => void;
}

const defaultValue: StudentContextModel = {
  students: [],
  setStudents: () => {},
};
const StudentContext = createContext(defaultValue);
export default StudentContext;

StudentContextProvider.tsx

import { ReactNode, useState } from "react";
import StudentContext from "./StudentContext";
import Student from "../models/Student";

function StudentContextProvider({ children }: { children: ReactNode }) {
  const [students, setStudents] = useState<Student[]>([]);

  return (
    <StudentContext.Provider
      value={{
        students,
        setStudents,
      }}
    >
      {children}
    </StudentContext.Provider>
  );
}

export default StudentContextProvider;

StudentList.tsx

import { useContext, useEffect } from "react";
import StudentContext from "../context/StudentContext";
import "./StudentList.css";

const StudentList = () => {
  const { students, setStudents } = useContext(StudentContext);
  useEffect(() => {
    setStudents([
      {
        id: "abc123",
        pic: "https://d23.com/app/uploads/2013/04/1180w-600h_a-to-z-tron.jpg",
        firstName: "John",
        lastName: "smith",
        email: "string@string.string",
        skill: "flailing with",
        city: "NY",
        company: "jobs inc.",
        grades: ["75", "60"],
      },
    ]);
  }, []);

  return <div className="StudentList">{students[0]?.firstName}</div>;
};

export default StudentList;

provider 中的 useState 声明似乎是有效的，因为如果我给 students 一个 defaultValue，它会通过，但是当我尝试在组件内部调用 setStudents 时，它不会覆盖 defaultValue .任何地方都没有错误。

我也试过

export interface StudentContextModel {
  students: Student[];
  setStudents: Dispatch<React.SetStateAction<Student[]>>;
}

在上下文文件中，但似乎零差异。同样，我也尝试将setStudents: () => {}, 更改为setStudents: () => [],。我认为这不会改变任何事情，因为 useState 函数返回 void，括号并不重要，我是对的。在我的每个备选方案中，错误为零，并且学生的 defaultValue 永远不会被覆盖。

【问题讨论】：

标签： reactjs typescript use-state use-context

【解决方案1】：

我是个傻瓜，忘记将组件包装在上下文提供程序中。

之前：

function App() {
  return (
    <div className="App">
      <Homepage />
    </div>
  );
}

之后：

function App() {
  return (
    <div className="App">
      <StudentContextProvider>
        <Homepage />
      </StudentContextProvider>
    </div>
  );
}

【讨论】：