如何使用扩展运算符复制嵌套对象属性

Question

我有一个对象数组，每个对象都有这些值

 id: "53ed5e27-23a5-4a06-b53f-d0113d607fb5"
measure:
units: Array(2)
0: {perPortion: 15, name: "tbsp"}
1: {perPortion: 1, name: "ml"}

我正在遍历数组并将点击函数传递给按钮。

function handleClick(index: number, ingredient: Data) {
    //copy original array
    const newListArr = [...props.data];

    newListArr[index] = {
        ...newListArr[index],
      }

}

函数获取点击对象的索引。我正在复制循环数组，然后尝试使用扩展运算符来引入所有属性。

我的问题是我不知道如何对嵌套对象使用扩展运算符。

我只想获取单位数组中“perPortion”键的值而不影响其他任何内容。 我该怎么做？

提前感谢您的帮助！

Answer 1

我只想获取目标中“perPortion”键的值 单位数组而不影响其他任何东西。

您可以复制整个嵌套对象，然后覆盖特定键的值。您将需要浅拷贝所有正在更新的嵌套属性。

function handleClick(index: number, ingredient: Data) {
  const newItem = {
    // shallow copy data
    ...props.data,
    measure: {
      // shallow copy measure object
      ...props.data.measure,
      // copy units array
      units: props.data.measure.units.map((unit, i) =>
        i === index
          ? {
              // shallow copy specific unit at matched index
              ...unit,
              perPortion: // new per portion value
            }
          : unit
      )
    }
  };

  .... // return or use newItem
}