如何在React的Filter Context Provider中定义setYear与setColor方法

问题背景 #

我开发了一个包含两个下拉选择器的React应用，用户可通过选择器挑选颜色和年份。目前在App组件中使用两个useState钩子管理状态，并将当前状态及更新函数通过props传递给子组件，核心代码如下：

export default function App() {
  const [color, setColor] = useState("red");
  const [year, setYear] = useState("2005");

  return (
    <div className="">
      <FiltersWrapper
        color={color}
        setColor={(color: string) => setColor(color)}
        year={year}
        setYear={(year: string) => setYear(year)}
      />

      <br />

      <Result color={color} year={year} />
    </div>
  );
}

// 其余组件代码省略

现在想改用Filter Context Provider优化状态管理，已经写了初步代码，但不清楚如何在FiltersProvider中定义setColor和setYear这两个状态更新函数：

export interface Filters {
  color: string;
  year: string;
}

const FilterContext = createContext<Filters>({
  color: "",
  year: ""
});

export const FilterProvider: FC<PropsWithChildren<{ filters: Filters }>> = ({
  filters,
  children
}) => (
  <FilterContext.Provider value={filters}>{children}</FilterContext.Provider>
);

export const useFilters = () => useContext(FilterContext);

// 其余代码省略

解决方案 #

要在Context中包含状态更新函数，需要调整Context的类型定义，并在Provider内部管理状态，把状态和更新函数一起作为value传递。

1. 更新Context类型，加入状态更新函数 #

首先扩展原来的Filters接口，新增状态更新函数的定义：

export interface Filters {
  color: string;
  year: string;
}

// 新增包含更新函数的完整Context类型
export interface FilterContextType extends Filters {
  setColor: (color: string) => void;
  setYear: (year: string) => void;
}

2. 重新创建Context，设置合理默认值 #

修改Context的创建代码，使用新的类型，并给更新函数设置空的默认实现（避免组件使用时出现未定义报错）：

const FilterContext = createContext<FilterContextType>({
  color: "red", // 和原App组件初始状态保持一致
  year: "2005",
  setColor: () => {},
  setYear: () => {}
});

3. 改造FilterProvider，内部管理状态并提供更新函数 #

把原来App组件里的useState逻辑移到Provider内部，然后将状态和更新函数组合成Context需要的value：

export const FilterProvider: FC<PropsWithChildren> = ({ children }) => {
  const [color, setColor] = useState("red");
  const [year, setYear] = useState("2005");

  const contextValue: FilterContextType = {
    color,
    year,
    setColor,
    setYear
  };

  return (
    <FilterContext.Provider value={contextValue}>
      {children}
    </FilterContext.Provider>
  );
};

4. 简化App组件，用Provider包裹子组件 #

现在App组件不需要自己管理状态，直接用FilterProvider包裹所有需要访问状态的子组件即可：

export default function App() {
  return (
    <FilterProvider>
      <div className="">
        <FiltersWrapper />
        <br />
        <Result />
      </div>
    </FilterProvider>
  );
}

5. 子组件通过useFilters获取状态和更新函数 #

在FiltersWrapper和Result组件中，直接调用useFilters就能拿到状态和更新函数，不用再通过props传递：

FiltersWrapper组件示例：

import { useFilters } from './FilterContext';

const FiltersWrapper = () => {
  const { color, setColor, year, setYear } = useFilters();

  return (
    <div>
      <select value={color} onChange={(e) => setColor(e.target.value)}>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
      </select>
      <select value={year} onChange={(e) => setYear(e.target.value)}>
        <option value="2005">2005</option>
        <option value="2010">2010</option>
        <option value="2015">2015</option>
      </select>
    </div>
  );
};

Result组件示例：

import { useFilters } from './FilterContext';

const Result = () => {
  const { color, year } = useFilters();

  return (
    <div>
      选中的颜色：{color}，选中的年份：{year}
    </div>
  );
};

这样改造后，所有需要访问筛选状态的组件都可以直接通过useFilters获取数据和修改方法，不用再层层传递props，状态管理更简洁。

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