Оператор Spread для назначения данных внутри массива в объекте

Question

Мне нужно обновить данные внутри приведенного ниже состояния, используя оператор распространения. Это должно быть сделано так, чтобы data[0] должно быть обновлено с "vehOn":"Finance"

let state = {
  "data": [{
    "year": "2017",
    "make": "ALFA ROMEO",
    "model": "ILX 4D 2.0 PREMIUM PACKAGE"
  }],
  "error": ""
};

Модифицированное состояние должно быть таким:

let modifiedstate = {
  "data": [{
    "year": "2017",
    "make": "ALFA ROMEO",
    "model": "ILX 4D 2.0 PREMIUM PACKAGE",
    "vehOn": "Finance"
  }],
  "error": ""
};

Answer 1

В соответствии с документацией, единственный способ добиться вашего результата - это:

let state = {
    "data": [{
        "year": "2017",
        "make": "ALFA ROMEO",
        "model": "ILX 4D 2.0 PREMIUM PACKAGE"
    }],
    "error": ""
};

let modifiedstate  = { "data": [{ ...state.data[0], ...{vehOn: "Finance"} }],
    "error": ""};

console.log(modifiedstate);

Answer 2

const state = {
  "data": [{
    "year": "2017",
    "make": "ALFA ROMEO",
    "model": "ILX 4D 2.0 PREMIUM PACKAGE"
  }],
  "error": ""
};

console.log("---- state ----");
console.log(state);

const modifiedstate = { ...state,
  data: state.data.map((entry, i) => i === 0 ? ({ ...entry,
    vehOn: "Finance"
  }) : entry)
};

console.log("---- modifiedstate ----");
console.log(modifiedstate);

Answer 3

Если вы намереваетесь создать объект, идентичный состоянию, и вы не знаете, какие свойства state может быть, вы должны искать способ глубокого клонирования его

В противном случае, если вы абсолютно уверены в структуре state и хотите сделать простой клон, вы можете сделать следующее:

   let modifiedstate = "data": [{
     ...state.data[0],
     "vehOn": "Finance"
     }],
     "error": ""
   }