object 條件下的展開算子存在

Question

考慮以下在 ES6 中使用擴展運算符的 Object：

{
  index: {
    ...builderVal,
    choices: {
      ...builderVal.choices,
      [field.key]: {
        ...builderVal.choices[field.key],
        choice: e.target.value
      }
    }
  }
}

這里， field.key是一個計算值，它可以是0或1或任何正的 integer 數字，而builderVal的作用類似於本地 state 字典。 此代碼在大多數情況下都有效，除非builderVal.choices尚不存在（例如，在初始化時，或在第一次掛載時）。

請注意，在第一次掛載時， ...builderVal.choices將是undefined的，因此直到第五行代碼都不會拋出異常。 但是在第七行代碼中，因為...builderVal.choices是undefined ，所以下面這行：

...builderVal.choices[field.key]

會導致錯誤（假設field.key為0）：

無法讀取未定義的屬性“0”

所以我最初的想法是，對 JavaScript 非常陌生，就像使用三元運算符或 AND 運算符一樣首先檢查它是否存在，例如（偽代碼）：

{
  // truncated 
  [field.key]: {
        builderVal.choices && ...builderVal.choices[field.key],
        choice: e.target.value
      }
}

但這顯然行不通。 任何指出我正確方向的東西都非常感謝。

Answer 1

您必須將價差應用於整個事物：

 [field.key]: {
        ...(builderVal.choices && builderVal.choices[field.key]),
        choice: e.target.value
      }

或者

 [field.key]: {
        ...builderVal.choices?.[field.key],
        choice: e.target.value
      }

如果builderVal.choices未定義，則不會插入任何內容（ ...undefined是無操作）。