将对象推送到数组中，若有任何重复的日期，则合并为相同日期的继承对象

Question

这是我用于表的主数组

const [tableData,setTableData] = useState([]);

这是从我的表单推送的对象

{ date: "2022-08-07", selectedData: { somedata: 'somedata'} }

我想把这些对象推送到tableData数组，如果有任何重复的date需要合并selectedData对象，

我希望有一个像下面这样的阵列

[
{ date: "2022-08-07", selectedData: [{ somedata: 'somedata1'},{ somedata: 'somedata2'}] },
{ date: "2022-08-08", selectedData: [{ somedata: 'somedata'}] },
]

Answer 1

这里有一个解决方案，它不需要额外的按日期键控条目。由于在ECMA规范中，对象键在技术上没有顺序(尽管大多数浏览器都遵守它(，因此在整个过程中最好将所有内容都作为一个数组。

const pushTableData = (dataToPush) => {
setTableDataArray(prevData => {
const newData = [...prevData]
const existingObjectIndex = prevData.findIndex(row => row.date === dataToPush.date)
if (existingObjectIndex !== -1) {
newData[existingObjectIndex] = {date: dataToPush.date, selectedData: [...prevData[existingObjectIndex].selectedData, dataToPush.selectedData]}
} else {
newData.push({data: dataToPush.date, selectedData: [dataToPush.selectedData])
}
return newData
})
}

Answer 2

您可以使用reduce函数来完成此操作。首先，您需要对日期进行迭代，并将它们存储在具有date键的对象中。如果你已经添加了date，你应该添加selectedData。否则，你应该用date键添加对象。你可以在这里查看代码：

const dates = [
{ date: "2022-08-07", selectedData: { somedata: 'somedata'} },
{ date: "2022-08-07", selectedData: { somedata: 'somedat2'} },
{ date: "2022-08-07", selectedData: { somedata: 'somedat3'} },
{ date: "2022-08-08", selectedData: { somedata: 'somedata'} },
{ date: "2022-08-08", selectedData: { somedata: 'somedata2'} },
{ date: "2022-08-10", selectedData: { somedata: 'somedata'} },
{ date: "2022-08-11", selectedData: { somedata: 'somedata'} },
]
const result = Object.values(dates.reduce((prev, curr) => {
return {
...prev,
[curr.date]: prev[curr.date] ? { ...prev[curr.date], selectedData: [...prev[curr.date].selectedData, curr.selectedData] } : { ...curr, selectedData: [curr.selectedData] }
}
}, {}))
console.log(result)

Answer 3

您应该查看selectedData的date属性是否存在于任何tableData中。假设表单中的新对象名为newData

setTableData((tableData) => {
const cloned = [...tableData];
for (let i = 0; i < tableData.length; i++) {
if (newData.date === tableData[i].date) {
cloned[i] = {
...cloned[i],
selectedData: [...cloned[i].selectedData, newData.selectedData]
};
return cloned;
}
}
return [...cloned, newData];
});

1. 您可以在setTableData内部或外部实现所需的逻辑
2. 永远不要改变你的状态