使用React更新器函数更新状态时遇到TypeScript错误

问题出在MyContainer的Props类型定义上：你给handleToggle指定的类型是(value: boolean) => void，但React的useState返回的更新函数（即setToggle）实际支持两种调用方式——直接传入状态值，或是传入接收前状态的更新函数。

修正方案 #

引入React内置的类型来匹配更新函数的真实类型：

// MyContainer.tsx
import { Dispatch, SetStateAction } from 'react';

type Props = {
  handleToggle: Dispatch<SetStateAction<boolean>>;
};

export const MyContainer = ({ handleToggle }: Props) => {
  // 现在调用更新函数不会报错
  handleToggle((prevState) => !prevState);
  // ...
}

说明 #

• Dispatch<SetStateAction<boolean>>是React提供的专用类型，精准描述了useState返回的更新函数类型。
• SetStateAction<boolean>本身包含两种合法输入：直接传入boolean值，或是传入(prevState: boolean) => boolean的更新函数，完美匹配setToggle的实际调用逻辑。

修改后TypeScript的类型错误会自动消失，同时能正确支持两种更新状态的方式。

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