我的数据如下，
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Save">
</form>
]
现在我想获取Item和subitem的多边形以及Item和subItem的颜色，并将其放入数组，如下所示，
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中的多边形。
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',
}
],
},
]
这里Something []的类型如下
const polygons = React.useMemo(() => {
return Items.reduce((acc: Something[], Item) => {
(Item.polygons || []).forEach(polygon => {
acc.push({ ...polygon, color: Item.color });
});
return acc;
}, []);
}, [Items]);
上面的代码仅从Item获取多边形，但也应从Item中的每个子项获取多边形。
我该如何使用打字稿进行操作并做出反应。有人可以帮我吗谢谢。
答案 0 :(得分：0)
我在示例数据中添加了缺少的逗号，这是您的处理方法。它可能可以通过某种方式进行优化。我还没有包括打字稿类型。我也在假设可以有多个子项的情况下映射子项，但是如果只是一个子项，则可以改用索引0。
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',
}
],
}
]
}
],
}
]
const newItems = items.map(item=> {
let subItems = item.subItems;
const transformedSubitems = subItems.map(subItem=> {
const newSubItem = {};
newSubItem['id'] = subItem.polygons[0].id
newSubItem['color'] = subItem.color
newSubItem['coordinates'] = subItem.polygons[0].coordinates
return newSubItem;
})
item.coordinates = item.polygons[0].coordinates;
item.id = item.polygons[0].id;
delete item.subItems;
delete item.name;
delete item.polygons;
return [item, ...transformedSubitems]
})
const flattenedArray = newItems.flat()
console.log(JSON.stringify(flattenedArray, null, 2))
答案 1 :(得分：0)
嗨，您必须将项目映射并推送到新数组， this is a working example
这是代码
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
}
)
});