React/TypeScript类组件转函数组件时Hooks部分状态更新报错问题

这个问题其实不是TypeScript的“小问题”，核心是类组件的setState和函数组件useState的setState行为本质不同：类组件的setState会自动合并你传入的部分状态和原有状态，而函数组件的setState是替换式更新——它会用你传入的新值完全覆盖旧状态，TypeScript的报错只是在帮你避免不小心丢失Person类型里必填的email属性。

不过确实不用每次手动写{...state, name:"me"}，这里有几个更优雅的解决方案：

方案1：自定义合并更新的setter函数 #

封装一个可以接受部分属性的更新函数，内部帮你完成状态合并，以后直接调用这个函数就行：

function Component() {
  const [state, setState] = useState<Person>(new Person());
  
  // 自定义支持部分更新的函数
  const updatePerson = (partial: Partial<Person>) => {
    setState(prevState => ({ ...prevState, ...partial }));
  };

  function foo() {
    // 直接传部分属性即可，TypeScript不会报错
    updatePerson({ name: "me" });
  }
}

这里Partial<Person>是TypeScript内置工具类型，它会把Person的所有属性变成可选的，完美适配部分更新的场景。

方案2：用useReducer替代useState #

如果你的状态更新逻辑比较复杂（比如以后还要更新email或者其他属性），useReducer是更合适的选择，天然支持结构化的状态更新：

// 定义reducer的动作类型
type PersonAction = 
  | { type: 'UPDATE_NAME'; value: string }
  | { type: 'UPDATE_EMAIL'; value: string };

// 实现reducer函数，负责状态更新逻辑
function personReducer(state: Person, action: PersonAction): Person {
  switch (action.type) {
    case 'UPDATE_NAME':
      return { ...state, name: action.value };
    case 'UPDATE_EMAIL':
      return { ...state, email: action.value };
    default:
      return state;
  }
}

function Component() {
  const [state, dispatch] = useReducer(personReducer, new Person());

  function foo() {
    // 通过dispatch触发状态更新
    dispatch({ type: 'UPDATE_NAME', value: 'me' });
  }
}

这个方案的优势是把状态更新逻辑集中起来，后续扩展更方便，也更符合React函数式编程的思路。

方案3：调整Person类型（可选，不推荐随意修改） #

如果你能接受把Person的属性改成可选的，也能解决报错，但这可能不符合你最初的类型设计意图：

class Person {
  name?: string = "";
  email?: string = "";
}

不过这种方式会让TypeScript放松对必填属性的校验，可能带来潜在的类型安全问题，所以除非必要，不建议这么做。

总结一下：自定义setter函数是最轻量化的解决方案，适合简单的状态更新；useReducer适合复杂场景；TypeScript的严格校验其实是在帮你避免状态丢失的bug，不是“小问题”哦。

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