如何在TypeScript中向React Context Provider传递值？

错误核心原因 #

你定义Context时指定的类型是null，但Provider传递的是包含greenValue和redValue的对象，类型完全不匹配，这是报错的主要原因。另外还有useState初始化方式错误、类型声明不完整的问题，下面是分步修复方案：

步骤1：定义Context的正确类型 #

先明确Context要传递的值的结构，声明对应的类型：

// 定义单个值对象的类型（适配greenValue/redValue的结构）
type ValueSet<T> = {
  vals: Set<T>;
  setVals: React.Dispatch<React.SetStateAction<Set<T>>>;
};

// 定义Context的整体类型
type InputListContextType = {
  greenValue: ValueSet<MyEnum>;
  redValue: ValueSet<MyEnum>;
};

创建Context时，用上述类型替代null，同时设置合理默认值（避免未包裹Provider时使用报错）：

export const inputListContext = createContext<InputListContextType>({
  greenValue: { vals: new Set<MyEnum>(), setVals: () => {} },
  redValue: { vals: new Set<MyEnum>(), setVals: () => {} }
});

步骤2：修复useState的初始化错误 #

你当前的useState(Set<MyEnum>)是把Set构造函数当成初始值，导致状态类型变成构造函数而非Set实例。正确写法是传递Set的实例：

const [greenVals, setGreenVals] = useState<Set<MyEnum>>(new Set<MyEnum>());
const [redVals, setRedVals] = useState<Set<MyEnum>>(new Set<MyEnum>());

步骤3：完善checkBoxParams的类型 #

替换any为明确类型，避免类型丢失：

type CheckBoxParams = {
  myEnum: MyEnum;
  name: string;
};

步骤4：修正Provider的值传递 #

确保greenValue/redValue的结构和ValueSet类型匹配：

const greenValue = { vals: greenVals, setVals: setGreenVals };
const redValue = { vals: redVals, setVals: setRedVals };

如果想保留原字段名（如greenVals而非vals），只需调整ValueSet的字段名即可，确保和Context类型一致

完整修复后的代码 #

import { createContext, useState, Dispatch, SetStateAction } from 'react';
import { MyEnum, FirmStatusEnum } from "../ts-api-script";

// 定义单个值对象的类型
type ValueSet<T> = {
  vals: Set<T>;
  setVals: Dispatch<SetStateAction<Set<T>>>;
};

// 定义Context类型
type InputListContextType = {
  greenValue: ValueSet<MyEnum>;
  redValue: ValueSet<MyEnum>;
};

// 创建Context并指定类型和默认值
export const inputListContext = createContext<InputListContextType>({
  greenValue: { vals: new Set<MyEnum>(), setVals: () => {} },
  redValue: { vals: new Set<MyEnum>(), setVals: () => {} }
});

// 完善Checkbox参数类型
type CheckBoxParams = {
  myEnum: MyEnum;
  name: string;
};

export const Options = () => {
  // 正确初始化Set状态
  const [greenVals, setGreenVals] = useState<Set<MyEnum>>(new Set<MyEnum>());
  const [redVals, setRedVals] = useState<Set<MyEnum>>(new Set<MyEnum>());

  const greenValue = { vals: greenVals, setVals: setGreenVals };
  const redValue = { vals: redVals, setVals: setRedVals };

  return (
    <inputListContext.Provider value={{ greenValue, redValue }}>
      <Checkbox myEnum={FirmStatusEnum.Op} name="Option 1" />
    </inputListContext.Provider>
  );
};

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