Вернуть объект с измененным свойством - JS

119
27 августа 2021, 03:50

Мне нужно найти элемент в объекте у которого есть определенное свойство , я это уже сделал вот таким кодом - result = this.state.tasksArray.findIndex(item => item.id === id); , все бы ничего , но теперь мне нужно создать идентичную копию объекта из state и присвоить ей свойство из найденного элемента . Примерно так -

let result = this.state.tasksArray.findIndex(item => item.id === id);
let tasksArray = Object.assign({}, this.state.tasksArray);
tasksArray.result.crossout = true;
this.setState({ tasksArray: tasksArray }); 

Как то так постарался реализовать, но компилятор не видит result .

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

Answer 1

Метод findIndex() возвращает индекс в массиве - это Number, то есть число. Чтобы извлечь элемент из массива по индексу - нужно воспользоваться квадратными скобками [], внутри них указать индекс.

На что хотелось бы обратить внимание - это на проверки, которых нет. Если метод findIndex не найдет элемент удовлетворяющий условию, то в этом случае возвращается -1. А значит на строке tasksArray[result].crossout = true; мы можем получить потенциальную ошибку. По-хорошему нужно последние две строки приведенного Вами кода поместить в блок с условием if (result != -1) { ... }.

На просторах enSO есть хороший вопрос с множеством полезных ответов, которые подходят для Вас, прошу ознакомиться вот тут: React: How do I update state.item[i] on setState?

Также, полезно читать документацию на MDN: Array.prototype.findIndex

Есть такая библиотека как immutability-helper (ссылка на GitHub - kolodny/immutability-helper), ну очень полезный хелпер, который изменяет копию данных без изменения исходного источника. Для начала ознакомьтесь с его основным методом update, в Вашем случае должно будет получиться что-то вроде такого кода:

// нашли индекс элемента, удовлетворяющего условию поиска
const result = this.state.tasksArray.findIndex(item => item.id === id);
// если элемент был найден, то поменяем значение
if (result != -1) {
  // $set - это команда на замену значения
  this.setState({
    tasksArray: update(this.state.tasksArray, {
      [result]: {
        crossout: { $set: true }
      }
    })
  });
}

Не забудьте после установки пакета добавить импорт метода update в свой код:

import update from 'immutability-helper';
Answer 2
let tasksArray = Object.assign([], this.state.tasksArray);
let result = tasksArray.findIndex(item => item.id === id);
tasksArray[result].crossout = true;
this.setState({ tasksArray }); 

или

let tasksArray = Object.assign([], this.state.tasksArray);
tasksArray.find(item => item.id === id).crossout = true;
this.setState({ tasksArray }); 
READ ALSO
Два вопроса по редактору DraftJS

Два вопроса по редактору DraftJS

В react приложении сделан редактор DraftJSЕсть два вопроса:

117
Посоветуйте плагин выбора даты въезда и выезда из отеля на jquery

Посоветуйте плагин выбора даты въезда и выезда из отеля на jquery

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

179
Отключение Drag-n-Drop в dropzonejs

Отключение Drag-n-Drop в dropzonejs

Перечитал кучу всегона офф сайте просто советуют

95