属性"map"在类型"MenuItemsProps".ts(2339)上不存在？

Question

我开始学习TypeScript，现在我正在把我的React代码转换成TypeScript。然后我遇到了这个问题，我无法解决它。基本上，我通过props组件传递一个状态已经实现值，并希望这个状态将被识别在其他组件，但然后我得到错误，当我试图映射到其他组件的状态。

MenuItems.tsx错误:

属性'map'不存在类型'MenuItemsProps'.ts(2339)

Project.tsx错误

类型'ClassType[]'不能分配给类型'Dispatch<ClassType[]>>'。类型'ClassType[]'没有为签名提供匹配'(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} />  // Error here in 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) => {   // the Error is coming from 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,
}

所以我试图使用调度和SetStateAction但不幸的是它没有帮助

—EDIT—

这个问题已经在下面评论的帮助下解决了:我在{menuItems}上添加了大括号:

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

然后替换这个"React.Dispatch<ClassType[]>>"与ClassType[]的问题:

type MenuItemsProps = {子菜单:ClassType []}

Answer 1

Replace "menu "与"Data.map"您当前正在尝试映射一个props对象。

Answer 2

这里有几个问题。

1. 有一些无效的JSX:<h2>缺少其关闭标记。看起来这只是一个复制/粘贴错误，并已在编辑中更正。

2. menuItems为道具对象。传递给组件的任何道具都将作为该对象的属性给出。要访问项目组件提供给MenuItems的ClassType[]，您需要访问该对象的menuItems属性。因此，您要么必须将其作为menuItems.menuItems访问，要么将其解构:

menuItems.menuItems.map((item: ClassType) => {...})
// or
const MenuItems = ({ menuItems }: MenuItemsProps) => {...}

3. 最后，实际的TypeScript问题:您正在声明menuItemsprop为React.Dispatch<React.SetStateAction<ClassType[]>>，但这是函数的类型，而不是数组(具体来说，它是Project.tsx中的setMenuItems()函数的类型)。根据你在项目组件中给菜单项的内容，你真的希望它是这样的:

type MenuItemsProps = {
menuItems: ClassType[]
}