如何修复错误类型 Item[] | undefined 不能使用 react 和 typescript 分配给 Item[] 类型？

萨丽莎

我是打字稿的新手，但出现错误

“类型 Item[] | undefined 不能分配给 Item[] 类型”

下面是代码，

function Parent ({Items}: Props) {
    return (
        <Child subItems={Items.subItems}/> //error here
    );
}


function Child({subItems}: Item[]) {
    const sortedSubItems = subItems.sort((a: Item,b: Item) =>    b.createdAt.localeCompare(a.createdAt));

    return ( 
        <>
            {sortedSubItems.map((subItem: Item) => {
                return (
                    <Card key={subItem.id}>
                        <CardHeader>
                            {subItem.name}
                        </CardHeader>
                    </Card>
                );
            })}
        </>
    );
};

这里 subItems 具有如下结构，

const subItems = [
    {
        id: '1',
        title: 'subitem-one',
        status: 'new',
        createdAt: '2020-08-13T16:32:10.000Z',
        orders: [
            {
                id: '1',
                title: 'subitem1-order-one',
                status: 'new',
            },
            {
                id: '2',
                title: 'subitem1-order-two',
                status: 'new',
            },
        ]
    },

    {
        id: '2',
        title: 'subitem-two',
        status: 'new',
        createdAt: '2020-08-16T12:02:06.000Z',
        orders: [
            {
                id: '2',
                title: 'subitem2-order-one',
                status: 'new',
            },
       ],
   },
]

项目类型如下所示，

export interface Item {
    id: string;
    createdAt: string;
    name?: string;
    orders?: Order[];
    subItems?: Item[];
}

有人可以帮助我使用打字稿修复错误并做出反应。谢谢。

克里斯 B。

因为您的subItems属性上有一个可选的类型运算符（问号），这向 Typescript 表明该属性可以是undefined. 您需要subItems为您的 Child 组件键入prop 以反映这一点，并在代码中适当地处理它：

interface ChildProps {
   subItems?: Item[]
}
function Child({subItems}: ChildProps) {
    const sortedSubItems = subItems ? subItems.sort((a: Item,b: Item) =>    b.createdAt.localeCompare(a.createdAt)) : [];

    return ( 
        <>
            {sortedSubItems.map((subItem: Item) => {
                return (
                    <Card key={subItem.id}>
                        <CardHeader>
                            {subItem.name}
                        </CardHeader>
                    </Card>
                );
            })}
        </>
    );
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。