React+TypeScript中如何通过Context实现对象状态更新？

你当前的问题是Context的类型定义和Provider传递的value不匹配——你创建的Context只接受Economy类型，但实际要传的是包含economy状态和setEconomy方法的对象，所以TypeScript会报错。

解决步骤如下：

1. 定义Context的完整类型 #

首先明确Context要传递的是一个包含状态和更新方法的对象，直接声明对应的类型：

// 声明Context的完整类型，包含状态和更新方法
type EconomyContextType = {
  economy: Economy;
  setEconomy: React.Dispatch<React.SetStateAction<Economy>>;
};

2. 更新createContext的默认值 #

原来的默认值只传了defaultEconomy，现在需要匹配新的类型，给setEconomy一个空函数作为默认值（实际使用时会被Provider的真实值覆盖）：

export const EconomyContext = createContext<EconomyContextType>({
  economy: defaultEconomy,
  setEconomy: () => {},
});

3. 保持Provider的value传递不变 #

现在Provider传递的{ economy, setEconomy }就完全匹配Context的类型了，不会再出现类型错误。

修改后的完整代码 #

import React, { createContext, useState } from 'react';
import Economy from './model/Economy';

const defaultEconomy: Economy = {
  households: [],
  simulationId: '',
};

// 声明Context的完整类型
type EconomyContextType = {
  economy: Economy;
  setEconomy: React.Dispatch<React.SetStateAction<Economy>>;
};

// 创建匹配类型的Context
export const EconomyContext = createContext<EconomyContextType>({
  economy: defaultEconomy,
  setEconomy: () => {},
});

export const ContextProviders: React.FC<React.PropsWithChildren> = (props) => {
  const [economy, setEconomy] = useState(defaultEconomy);
  return (
    <EconomyContext.Provider value={{ economy, setEconomy }}>
      {props.children}
    </EconomyContext.Provider>
  );
};

嵌套组件中使用示例（可选） #

在子组件里就可以同时拿到状态和更新方法，直接修改状态：

import { useContext } from 'react';
import { EconomyContext } from './ContextProviders';

const SomeNestedComponent = () => {
  const { economy, setEconomy } = useContext(EconomyContext);

  // 示例：更新simulationId
  const updateSimulationId = (newId: string) => {
    setEconomy(prev => ({ ...prev, simulationId: newId }));
  };

  return <button onClick={() => updateSimulationId('new-sim-id')}>更新模拟ID</button>;
};

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