React+TypeScript中useState钩子setter作为props传递的类型报错问题

你的判断完全正确，TypeScript报错的核心原因是ApproveModal组件的props类型定义错误。

错误原因 #

你在ApproveModalProps接口中将setActive的类型定义为boolean，但从父组件传递的setActiveModal是useState返回的状态更新函数，二者类型不匹配触发了类型校验报错。

useState<boolean>(false)返回的更新函数固定类型为：React.Dispatch<React.SetStateAction<boolean>>，既支持直接传入新的布尔值，也支持传入基于旧值计算新值的回调函数。

修正方法 #

修改ApproveModal组件的props类型定义即可：

// 先从react包导入需要的内置类型
import type { Dispatch, SetStateAction } from 'react'

interface ApproveModalProps {
    active: boolean;
    // 将setActive的类型从boolean替换为下方的函数类型
    setActive: Dispatch<SetStateAction<boolean>>;
}

如果不想引入React的内置类型，也可以手动写等价的函数类型：

interface ApproveModalProps {
    active: boolean;
    setActive: (newValue: boolean | ((prevValue: boolean) => boolean)) => void;
}

可选优化建议 #

你当前代码里模态框的关闭按钮还没有绑定点击事件，补充后可以实现点击关闭模态框的效果：

<img 
  src={closeIcon} 
  alt="closeIcon" 
  className="close-button" 
  onClick={() => setActive(false)}
/>

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