Блог

Здесь реагирует новичок.

Я пытаюсь сопоставить значение определенного идентификатора, расположенного в моем состоянии, чтобы я мог изменить некоторое значение перед обновлением базы данных через мой api.

Состояние является

 state = {
library: []
}
  

и затем, когда axios изменяет состояние, массив выглядит примерно так:

 0:{_id:"", time:"", value:""},
2:{_id:"", time:"", value:""}
  

Когда я запускаю console.log, он читает это следующим образом.

 (2) [{…}, {…}]0: {_id: "5c82803ad634ea0bebfb3eff", time: "2019-03-08T14:46:18.663Z", value:""}1: {_id: "5c827fb9d634ea0bebfb3efe", time: "2019-03-08T14:44:09.818Z", value:""}
  

Итак, в основном, когда я ввожу определенное поле ввода, обозначенное его _id, мне нужно обновить состояние значения этого конкретного состояния.

Вот код, который я написал на данный момент. _id — это уникальный ключ поля ввода и значение события, которое я набираю.

 updateRead = (_id, event) => {
    console.log(_id);
    console.log(event.target.value)
    this.setState(?????)
};
  

Помощь была бы высоко оценена!

Приветствия

Вы можете использовать map метод array для library массива в вашем состоянии и просто возвращать элементы как есть, если _id они не совпадают, и обновлять, value если _id они совпадают.

 updateRead = (_id, event) => {
  const { value } = event.target;

  this.setState(prevState => ({
    library: prevState.library.map(read => {
      if (read._id !== _id) {
        return read;
      }
      return {
        ...read,
        value
      };
    })
  }));
};
  

Два фундаментальных правила определения состояния в React::

• Никогда не изменяйте состояние напрямую
• Используйте версию обратного вызова setState при настройке состояния на основе существующего состояния (подробнее)

Кроме того, вы не можете получить доступ к свойствам синтетического события после возврата обработчика события, поэтому вам захочется получить значение перед вызовом setState (поскольку вызов вашего обратного вызова будет асинхронным).

В рамках обратного вызова вы копируете массив, находите соответствующий объект, копируете его и устанавливаете значение.

Итак:

 updateRead = (_id, event) => {
    const {value} = event.target;
    this.setState(({library}) => ({
        library: library.map(entry => entry._id === _id ? {...entry, value} : entry)
    }));
};
  

map создает новый массив из записей предыдущего массива. Обратный вызов возвращает новый объект, если идентификаторы совпадают (с использованием обозначения распространения свойств) с обновленным value или исходным объектом (поскольку нам не нужно копировать объекты, которые мы не изменяем).