将对象添加到包含在对象内的数组而不覆盖答案

【问题标题】：Adding an object to an array contained inside an object without overriding将对象添加到包含在对象内的数组而不覆盖
【发布时间】：2021-07-16 05:09:48
【问题描述】：

我目前正在尝试遍历一组对象（每个对象都是一个任务），其中每个任务都包含相关信息，例如名称和日期。然后将来自每个任务的信息用于创建包含数组的对象，其中每个数组包含与日期或数组对应的对象。

我目前的代码如下：

contextTasks.forEach((taskItem) => {
  taskItem["taskSchedule"].forEach((dateItem) => {
    setItems((items) => ({
      ...items,
      [dateItem["date"]]: [
        {
          name: taskItem["taskName"],
          time: new Date(dateItem["time"]).toLocaleTimeString([], {
            hour: "2-digit",
            minute: "2-digit",
          }),
          type: "Task",
        },
      ],
    }));
  });
});

但是，如果有多个任务具有相同的日期，它们将相互覆盖，并且每个日期我只能完成一个任务。如果该特定日期还有其他条目，我将如何将更多对象推送到数组？

成品：

Object {
  "2021-04-21": Array [
    Object {
      "name": "Test Class v1",
      "type": "Class",
    },
  ],
  "2021-04-24": Array [
    Object {
      "name": "Test Task v2",
      "type": "Task",
    },
    //I would like to add another object here without overriding existing contents of the array
  ],
}

【问题讨论】：

标签： arrays reactjs loops object nested

【解决方案1】：

你试过使用 reduce 吗？

我们的想法是在你的累加器里有这样的东西： {"date1": [{val}, {val}, ...] , "date2": [{val}, {val}, ...]}

array.reduce((acc, val) => {
// test if your accumulator has the same date as your date from the val
if(acc[val.date]) {
 acc[val.date] = [... acc[val.date], ...your val] 
} else {
// no date found in the accumulator so make acc.date = ...acc.date, val
acc[val.date] = [ val ]
}

}, {})

对不起，如果代码不完美，但如果你想提供你的初始数据数组，我会修复响应代码

【讨论】：

谢谢你，这真的很有帮助！

【解决方案2】：

问题的原因是您在同步循环中执行异步方法。此外，修改状态会强制重新渲染，并且您可能会尝试一次执行多次。它可能会在某个时候造成瓶颈。

解决方案：首先构建您的新状态，然后执行一次setState。

【讨论】：

感谢您的反馈！