javascript - 编辑功能不保存对 React 中状态数据的更改

Question

我正在尝试在我的网页中提供用于编辑状态数据的功能。

这是状态结构

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

我希望能够编辑列表数组，特别是 id、name 和 type 属性，但我的函数似乎无法编辑它们？我当前传递的数据是我想用变量 eventData 覆盖 id 名称和类型，以及指定在输出状态数据的表中选择哪一行的 id 值。

函数代码如下:

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,
     });
   };

当我运行代码时，该函数不会更改单个映射变量，而且我似乎无法查明原因。任何帮助都会很棒

编辑:

实现 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,
 });

};

我收到一个新错误，提示无法读取另一个使用映射函数将状态数据呈现到表中的文件中未定义的属性列表？

这是导致错误的另一个文件的部分:

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,
     });
   };