Javascript 使用对象数组编辑方法

我有一个包含对象数组的方法，我希望能够编辑desiredMin和desiredMax值

    watchedRivers(): RiverInfo[] {
    return [
      {
        name: 'Sample River 1',
        address: 'Optional Address 1',
        currentFlow: 2.78,
        desiredMin: 1.5,
        desiredMax: 6
      },
      {
        name: 'Sample River 2',
        currentFlow: 857,
        desiredMin: 100,
        desiredMax: 500
      },
      {
        name: 'Sample River 3',
        address: 'Optional Address 1',
        currentFlow: 2800,
        desiredMin: 400,
        desiredMax: 3000
      }
    ];
  }

为此调用的方法不是覆盖对象

updateFlows(index: number, updatedRiver: RiverInfo) {
    console.log(updatedRiver);
    this.watchedRivers()[index] = updatedRiver;
    console.log(this.watchedRivers()[index]);
    this.watchedRiversChanged.next(this.watchedRivers().slice());
  }

---

updatedRiver对象在控制台中看起来是正确的格式。为什么它不被覆盖？

最好的解决方案是不要对此进行变异。watchedRivers（）

---

每次调用

watchedRivers（）

方法时，它都会返回一个新的RiverInfo对象数组，其中包含

Sample River 1、Sample River 2和Sample River 3

。因此，将updatedRiver对象分配给

watchedDrivers（）[index]

不会修改方法中的RiverInfo对象

如果要持久保存updatedRiver信息，可以采用以下两种方法之一：

您可以将数组存储在类级变量中，而不是从方法返回数组

现在更新保存在类级别变量中

如果不想修改该方法，可以将数组存储在局部变量中，然后执行逻辑

---

你做得不对

1） 在function WatchedDrivers中，您只是返回一个新的对象数组。因此，每次调用此函数时，它都会返回新的数组，而不会进行任何更改

2） 分别在组件属性（变量）中设置

RiverInfo[]

   data: RiverInfo[] = [
    {
      name: "Sample River 1",
      address: "Optional Address 1",
      currentFlow: 2.78,
      desiredMin: 1.5,
      desiredMax: 6
    },
    {
      name: "Sample River 2",
      currentFlow: 857,
      desiredMin: 100,
      desiredMax: 500
    },
    {
      name: "Sample River 3",
      address: "Optional Address 1",
      currentFlow: 2800,
      desiredMin: 400,
      desiredMax: 3000
    }
  ];

3） 而不是从函数返回函数中的数据

     watchedRivers(): RiverInfo[] {
            return this.data;
     }

4） 试试这个

---

出现上述问题的原因是RiverInfo数组的范围仅限于函数，函数执行完成后，RiverInfo数组将被垃圾收集

updateFlows(index: number, updatedRiver: RiverInfo) {
    console.log(updatedRiver);
    let localData = this.watchedRivers();
    localData[index] = updatedRiver;
    console.log(localData[index]);
    this.watchedRiversChanged.next(localData.slice());
}

   data: RiverInfo[] = [
    {
      name: "Sample River 1",
      address: "Optional Address 1",
      currentFlow: 2.78,
      desiredMin: 1.5,
      desiredMax: 6
    },
    {
      name: "Sample River 2",
      currentFlow: 857,
      desiredMin: 100,
      desiredMax: 500
    },
    {
      name: "Sample River 3",
      address: "Optional Address 1",
      currentFlow: 2800,
      desiredMin: 400,
      desiredMax: 3000
    }
  ];

     watchedRivers(): RiverInfo[] {
            return this.data;
     }