反应 setstate 嵌套对象问题答案

【问题标题】：React setstate nested object issue反应 setstate 嵌套对象问题
【发布时间】：2020-06-16 23:52:47
【问题描述】：

我无法在第二天晚上解决这个 setState，我已经绝望了。我有大量嵌套的对象，我正在尝试更新。如果我在 todaysMenu 中有多个元素并且我正在尝试更新第二个元素的状态，整个数组会“存储”在 todaysMenu 的第一个元素中。

onChangeAnyValue(values, itemIndex) {
        const key = Object.keys(values.x)[0];
        const provideDate = values.date;
        this.setState(prevState => ({
            data: prevState.data.map(day => day.date === provideDate ? {
                ...day,
                todaysMenu: [{
                    ...day.todaysMenu,
                    [itemIndex]: {
                        ...day.todaysMenu[itemIndex],
                        dish: {
                            ...day.todaysMenu[itemIndex].dish,
                            [key]: values.x[key]
                        }
                    }
                }]
            } : day)
        }));
    }

如果我删除方括号，它只是存储为对象。

感谢您的宝贵时间！

【问题讨论】：

标签： javascript arrays object nested setstate

【解决方案1】：

你会想要改变：

todaysMenu: [{
  ...day.todaysMenu,
  [itemIndex]: {
    ...day.todaysMenu[itemIndex],
    dish: {
      ...day.todaysMenu[itemIndex].dish,
      [key]: values.x[key]
    }
  }
}]

...到：

todaysMenu: day.todaysMenu.map((item, index) => 
  index === itemIndex
    ? { ...item, dish: { ...item.dish, [key]: values.x[key] } }
    : item
)

您目前拥有的是使用一个对象创建一个数组，而不是将数组转换为修改后的数组。

【讨论】：