Как обновить state в этом случае?

Question

[Wood Walker]

Есть такой state

this.state = {
   listObjects : [ {Object} , {Object} , {Object} ]
}

Не могу понять, как обновить состояние у первого объекта, не меняя состояние других. Если попробовать так
this.setState.listObjects[1]({ })
Он выдает сообщение

Cannot read property '1' of undefined

При этом если вывести в консоль
console.log(this.state.listObjects[1])
То ошибки не будет, и он выведет нужный объект.

Answer 1

[Александр Золотарев]

this.setState((prevState) => {
      prevState.listObjects[0].param = '3'
      return prevState;
})

Comments

[Wood Walker]

Чот рано я обрадовался. Если сделать таким образом, он для всех listObjects перепишет параметр param.

[Александр Золотарев]

Виталий Семенов, Значит вы что то не правильно делаете, метод рабочий.

Answer 2

[Антон Мудренок]

this.setState((prevState) => {
  const prevArr = prevState.listObjects.slice();
  let el = prevArr.shift();
  el = { ...el, prop: 'value' }
  return ({ listObjects: [el, ...prevArr] });
})

upd. но лучше так:

const changeListObjValue = (index, newValue) => {
  this.setState((prevState) => {
    const newArr = prevState.listObjects.slice();
    newArr.splice(index, 1, newValue)
    return ({ listObjects: newArr });
  })
}

Comments

[ayazZali]

Извините за может глупый вопрос - а он весь компонент потом не будет перестраивать?
(знаю что реакт умный, но похоже делал - и задержка чувствовалась)

[Wood Walker]

Могу ошибаться, но по идеи не должен.

Answer 3

[Роман Александрович]

https://jsfiddle.net/vyzLcww4/