Функция редактирования, не сохраняющая изменения данных состояния в React

Question

Я пытаюсь предоставить функциональность на своей веб-странице для редактирования данных состояния.

Вот структура состояния

state = {
  eventList:[
    {
       name: "Coachella"
       list: [
          {
             id: 1,
             name: "Eminem"
             type: "rap"
          }
          {
             id: 2,
             name: "Kendrick Lamar"
             type: "rap"
          }
       ]
    }
  ]
}

Я хочу иметь возможность редактировать массивы списков, в частности идентификатор , имя и свойства типа, но моя функция, кажется, не редактирует их? В настоящее время я передаю данные, которые хочу переопределить имя и тип идентификатора с помощью переменной eventData, и значение идентификатора, указывающее, какая строка выбрана в таблице, которая выводит данные состояния.

Вот код функции:

editPickEvent = (eventData, id) => {
     const eventListNew = this.state.eventList;
     eventListNew.map((event) => {
       event.list.map((single) => {
         if (single.id == id) {
           single = eventData;
         }
       });
     });
     this.setState({
       eventList: eventListNew,
     });
   };

Когда я запускаю код, функция не изменяет одну переменную карты, и я не могу точно определить причину. Любая помощь будет отличной

edit:

Реализация решения Captain Mhmdrz_A

editPickEvent = (eventData, id) => {
 const eventListNew = this.state.eventList.map((event) => {
   event.list.map((single) => {
     if (single.id == id) {
       single = eventData;
     }
   });
 });
 this.setState({
   eventList: eventListNew,
 });

};

Я получаю новую ошибку с сообщением Cannot read список свойств undefined в другом файле, который использует функцию map для отображения данных состояния в таблицу?

Это часть другого файла, вызывающая ошибку:

render() {
const EventsList = this.props.eventList.map((event) => {
  return event.list.map((single) => {
    return (

Answer 1

map () каждый раз возвращает новый массив, но вы никому его не назначаете;

editPickEvent = (eventData, id) => {
     const eventListNew = this.state.eventList.map((event) => {
       event.list.forEach((single) => {
         if (single.id == id) {
           single = eventData;
         }
       });
       return event
     });
     this.setState({
       eventList: eventListNew,
     });
   };

Answer 2

const editPickEvent = (eventData, id) => {
   const updatedEventList = this.state.eventList.map(event => {
        const updatedList = event.list.map(single => {
            if (single.id === id) {
                return eventData;
            }
            return single;
        });
        return {...event, list: updatedList};
    });
    this.setState({
       eventList: updatedEventList,
    });
}

Пример ссылки: https://codesandbox.io/s/crazy-lake-2q6ez

Примечание: Может потребоваться добавить дополнительные проверки между ними для обработки случаев, когда значения могут быть нулевыми или не определено. Также было бы хорошо, если бы вы могли добавить что-то похожее на исходный источник данных или пример ссылки.

Answer 3

Оказывается, примитивные значения передаются по значению в javascript, чего я не знал, и почему назначение не работало в некоторых из предыдущих предложенных ответов. Вот код, который заставил его работать на меня:

 editEvent = (EventData, id) => {
     const eventListNew = this.state.eventList.map((event) => {
       const newList = event.list.map((single) => {
         return single.id == id ? EventData : single;
       });
       return { ...event, list: newList };
     });
     this.setState({
       eventList: eventListNew,
     });
   };