Javascript 为什么可以'；t I在一个对象内的数组中展开，该对象有另一个处于同一级别的对象被过滤

下面是我正在编写的应用程序的一部分的虚拟复制品

我使用返回一周中几天的

常量测试
映射一组数据。一旦我点击某一天，而这一天不在
this.state.testingDates.array
中，我使用
setState
将一周中的这一天添加到
this.state.testingDates.array
中

当我点击某一天时，我得到以下错误
传播不可复制实例的尝试无效

为什么我不能扩展
…数组
，所以我保留了旧的
状态
，而我的
状态
以这种方式组织，使
数组：[]
与
类频率
处于相同的级别

如果我将
array
向上移动一级（以
this.state.array
结尾），那么一切都会顺利进行

这是我的

从“React”导入React；
导入“/styles.css”；
导出默认类App扩展React.Component{
状态={
测试日期：{
阵列：[]，
类别频率：[
{day:“Sun”，DayOfWeek:0，toggleClassColor:“inherit”}，
{day:“Mon”，DayOfWeek:1，toggleClassColor:“inherit”}，
{day:“Tue”，DayOfWeek:2，toggleClassColor:“inherit”}，
{day:“Wed”，DayOfWeek:3，toggleClassColor:“inherit”}，
{day:“Thu”，DayOfWeek:4，toggleClassColor:“inherit”}，
{day:“Fri”，DayOfWeek:5，toggleClassColor:“inherit”}，
{day:“Sat”，DayOfWeek:6，toggleClassColor:“inherit”}
]
}
};
非ITerableHandler=（childDay，childIndex）=>{
const classFrequency=this.state.testingDates.classFrequency；
if（！this.state.testingDates.array.includes（childDay.day））{
这是我的国家(
（{array}）=>({
数组：[…数组，classFrequency[childIndex].day]
}),
() => {
log（“数组排列…”，this.state.array）；
}
);
}
};
render（）{
让test=this.state.testingDates.classFrequency.map（（val，index）=>(
this.nonIterableHandler（val，index）}
>
{val.day}

));
返回(
测试不可测试
{test}
);
}
}
您的初始状态在顶层没有
数组
属性：

  state = {
    testingDates: {
      array: [],
      // ...
    }
  }

数组位于
testingDates
对象中。如果

this.setState(
  ({ array }) =>

它不会工作，因为顶部不存在
array
属性

如果需要，可以使用嵌套的分解结构正确提取阵列：

this.setState(
  ({ testingDates: { array }}) =>

并确保将新数组指定给正确的嵌套属性：

this.setState(
  ({ testingDates: { array, ...restTesting }, ...restTop }) => ({
    testingDates: {
      array: [...array, classFrequency[childIndex].day],
      ...restTesting
    },
    ...restTop
  }),
  () => {
    console.log("array spreads...", this.state.testingDates.array);
  }
);

您的初始状态在顶层没有
数组
属性：

  state = {
    testingDates: {
      array: [],
      // ...
    }
  }

数组位于
testingDates
对象中。如果

this.setState(
  ({ array }) =>

它不会工作，因为顶部不存在
array
属性

如果需要，可以使用嵌套的分解结构正确提取阵列：

this.setState(
  ({ testingDates: { array }}) =>

并确保将新数组指定给正确的嵌套属性：

this.setState(
  ({ testingDates: { array, ...restTesting }, ...restTop }) => ({
    testingDates: {
      array: [...array, classFrequency[childIndex].day],
      ...restTesting
    },
    ...restTop
  }),
  () => {
    console.log("array spreads...", this.state.testingDates.array);
  }
);

哦，我明白了！你是说在
状态
的顶层没有名为
数组
的
对象
吗？有趣的是……我仍然在选择语法，好吧，如果
测试日期
比
状态
更深一层呢？你可以做同样的事情：
（{testingDates:{nested:{array，…restNested}…restesting}，…restop}）
或者，在这一点上，最好只使用一个层次的解构，并列出需要通过点符号传播的属性哦，我明白了。所以让我们假设
testingDates
现在在
newClassForm
中，使
成为这个.state.newClassForm.testingDates.array
。我明白你的意思了。所以我想这将是一个干净的解决方案，wright？
this.setState（{newClassForm:{testingDates}}）=>（{array:[…testingDates.array，classFrequency[childIndex.day]}），（）=>{console.log（“array spreads…”，this.state.array）；}）从函数返回的对象应具有与初始状态相同的结构，因此它需要一个
newClassForm
对象
确保将状态中的其余属性也分散开来，否则它们将丢失！你是说在状态的顶层没有名为
数组的
对象，这是指顶层吗？有趣的…我仍然在选择语法好吧，如果
testingDates
更深一层呢
state
？您可以做同样的事情：
（{testingDates:{nested:{array，…restNested}…restesting}，…restop}）
或者，在这一点上，最好只使用一个层次的解构，并列出需要通过点符号传播的属性哦，我明白了。所以让我们假设
testingDates
现在在
newClassForm
中，使
成为这个.state.newClassForm.testingDates.array
。我明白你的意思了。所以我想这将是一个干净的解决方案，wright？
this.setState（{newClassForm:{testingDates}}）=>（{array:[…testingDates.array，classFrequency[childIndex.day]}），（）=>{console.log（“array spreads…”，this.state.array）；}）从函数返回的对象应该具有与初始状态相同的结构，因此它需要一个
newClassForm
对象