React TypeScript中SetStateAction类型调用报错问题求助

你犯了一个类型定义错误：React.SetStateAction<boolean>是传给setState函数的参数类型，而非setState函数本身的类型。

错误详情 #

当你把setLiked的类型定义为React.SetStateAction<boolean>时，TypeScript会认为它可能是两种类型：

• 直接的boolean值
• 返回boolean的函数

但实际从useState拿到的setLiked是一个调度函数，正确类型应为React.Dispatch<React.SetStateAction<boolean>>，所以你把它当函数调用时，TypeScript会报错“不是所有成员都可调用”。

修正代码 #

只需修改Heart组件的类型定义：

import React from 'react';
import './heart.sass';

// 修正setLiked的类型
type HeartProps = {
    liked: boolean,
    setLiked: React.Dispatch<React.SetStateAction<boolean>> 
}

const Heart: React.FC<HeartProps> = ({liked, setLiked}) => {
    return (
        <button onClick={() => setLiked(!liked)} className='heartButton'>
        </button>
    );
};

export default Heart;

Cart组件代码无需改动，因为useState<boolean>返回的setter函数完全匹配React.Dispatch<React.SetStateAction<boolean>>类型。

为什么改成any能运行 #

当你把类型改成React.SetStateAction（本质等价于any）时，TypeScript会跳过类型检查，因此不会报错，但这种做法会丢失TypeScript的类型安全保障，不推荐使用。

内容的提问来源于stack exchange，提问作者М Лутфуллаев