reactjs - 如何使用打字稿将数组中的对象推入一个对象数组并做出反应？

Question

我有如下数据，

const items = [
    {
        id: '1',
        color: 'green',
        name: 'item1',
        polygons: [
            {
                id: '1', 
                coordinates: [
                    {
                        latitude: '25.00',
                        longitude: '-25.99',
                    }
                    {
                        latitude: '15.00',
                        longitude: '-25.99',
                    }
                    {
                        latitude: '25.00',
                        longitude: '-35.99',
                    }
                ],
            }
        ]
        subItems: [
            {
                id: '1', 
                name: 'subitem-1',
                color: 'green',
                polygons: [
                   {
                       id: '2', 
                       coordinates: [
                           {
                               latitude: '25.00',
                               longitude: '-25.99',
                           }
                           {
                               latitude: '15.00',
                               longitude: '-25.99',
                           }
                           {
                               latitude: '25.00',
                               longitude: '-35.99',
                           }
                       ],
                   }
               ]
           }
       ],
   },
   {
        id: '2',
        color: 'red',
        name: 'item2',
        polygons: [
            {
                id: '3', 
                coordinates: [
                    {
                        latitude: '25.00',
                        longitude: '-25.99',
                    }
                    {
                        latitude: '15.00',
                        longitude: '-25.99',
                    }
                    {
                        latitude: '25.00',
                        longitude: '-35.99',
                    }
                ],
            }
        ]
        subItems: [
            {
                id: '2', 
                name: 'subitem-1',
                color: 'red',
                polygons: [
                   {
                       id: '5', 
                       coordinates: [
                           {
                               latitude: '25.00',
                               longitude: '-25.99',
                           }
                           {
                               latitude: '15.00',
                               longitude: '-25.99',
                           }
                           {
                               latitude: '25.00',
                               longitude: '-35.99',
                           }
                       ],
                   }
               ]
           }
       ],
   }

]

现在我想获取 Item 和 subitem 的多边形以及 Item 和 subItem 的颜色，并将其放入如下数组中，

const polygons = [
    {
         id: '1',
         color: 'green', //this comes from item.color
         coordinates: [
             {
                 latitude: '25.00',
                 longitude: '-25.99',
             }
             {
                 latitude: '15.00',
                 longitude: '-25.99',
             }
             {
                 latitude: '25.00',
                 longitude: '-35.99',
             }
         ],
     },
     {
         id: '2',
         color: 'green', //this comes from subItems color
         coordinates: [
             {
                 latitude: '25.00',
                 longitude: '-25.99',
             }
             {
                 latitude: '15.00',
                 longitude: '-25.99',
             }
             {
                 latitude: '25.00',
                 longitude: '-35.99',
             }
         ],
     },
     {
         id: '3',
         color: 'red', //this comes from Item color
         coordinates: [
             {
                 latitude: '25.00',
                 longitude: '-25.99',
             }
             {
                 latitude: '15.00',
                 longitude: '-25.99',
             }
             {
                 latitude: '25.00',
                 longitude: '-35.99',
             }
         ],
     },
     {
         id: '4',
         color: 'red', //this comes from subItems color
         coordinates: [
             {
                 latitude: '25.00',
                 longitude: '-25.99',
             }
             {
                 latitude: '15.00',
                 longitude: '-25.99',
             }
             {
                 latitude: '25.00',
                 longitude: '-35.99',
             }
         ],
     },
 ]

现在的问题是如何将 Item 和 subItems 中的多边形放入对象数组中。

我已经尝试过类似下面的方法，它只会放置 Item 中的多边形。

const polygons = React.useMemo(() => {
    return Items.reduce((acc: Something[], Item) => {
        (Item.polygons || []).forEach(polygon => {
            acc.push({ ...polygon, color: Item.color });
        });
        return acc;
    }, []);
}, [Items]);

这里Something[]的类型如下

export interface Polygon {
    id: string;
    coordinate: Coordinate[];
    item: Item;
}

export interface Something extends Polygon {
    color: string;
}

上面的代码只从 Item 中获取多边形，但也应该从 Item 中的每个 subItem 中获取多边形。

我如何使用打字稿来做到这一点并做出反应。有人可以帮我解决这个问题。谢谢。

标签： reactjstypescript

Answer 1

嗨，您必须将项目映射并推送到新数组， 这是一个工作示例

这是代码，

let polygons = [];
items.map(i =>{
  polygons.push(
    {
      id:i.id,
      color: i.color,
      coordinates: i.polygons[0].coordinates
    }
  )
  polygons.push(
    {
      id:i.subItems[0].id,
      color: i.subItems[0].color,
      coordinates: i.subItems[0].polygons[0].coordinates
    }
  )
});