React转TypeScript时props传递与map调用的类型错误解决

问题概述 #

我正在学习TypeScript，将React代码迁移到TypeScript时遇到两个问题：向子组件传递状态props后，子组件调用map方法报错；同时父组件传递props时存在类型不匹配问题。

报错信息 #

MenuItems.tsx 报错 #

Property 'map' does not exist on type 'MenuItemsProps'.ts(2339)

Project.tsx 报错 #

Type 'ClassType[]' is not assignable to type 'Dispatch<SetStateAction<ClassType[]>>'.
Type 'ClassType[]' provides no match for the signature '(value: SetStateAction<ClassType[]>): void'.ts(2322)

相关代码 #

Project.tsx #

import Data from '@/assets/data/Data'

const Project = () =>  {

    const [menuItems, setMenuItems] = useState<typeof Data>(Data); 

    return (
         <MenuItems menuItems={menuItems} />  // 此处menuItems报错
    )
}

MenuItems.tsx #

import Data from '@/assets/data/Data'
type MenuItemsProps = {
    menuItems: React.Dispatch<React.SetStateAction<ClassType[]>>
}

const MenuItems = (menuItems: MenuItemsProps) => {
    return (
        <div className='menuitem'>
            <h1>sample</h1>
            {
                menuItems.map((item: ClassType) => {   // map调用处报错
                    return <div className='menuitem-list' key={item.id}>
                                <h2>{item.title}</h2>
                           </div>
                })
            }
        </div>
    )
}

Data.ts #

import { ClassType } from "../types/Types";
const portfolios: Array<ClassType> = [
    {
        id: 1,
        title: 'Example1',
    },
    {
        id: 2,
        title: 'Example1',
    },
    {
        id: 3,
        title: 'Example1',
    },
]
export default portfolios;

Types.ts #

export type ClassType = {
    id: number,
    title: string,
}

我尝试使用Dispatch和SetStateAction但未解决问题。

解决方案 #

通过以下两步解决了问题：

1. 解构props参数：
   将子组件的参数改为解构形式，直接获取props中的menuItems字段：

   const MenuItems = ({ menuItems }: MenuItemsProps) => {
   }
   

2. 修正MenuItemsProps类型定义：
   将props类型改为实际需要的数组类型，而非状态更新函数类型：

   type MenuItemsProps = {
       menuItems: ClassType[]
   }
   

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