编辑功能不保存对 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 名称和类型，该 id 值指定在输出状态数据的 table 中选择了哪一行。

功能代码如下：

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

};

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

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

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

Answer 1

map() return 每次都是一个新数组，但你没有将它分配给任何东西；

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

示例Link：https://codesandbox.io/s/crazy-lake-2q6ez

注意：您可能需要在两者之间添加更多检查以处理值可能为空或未定义的情况。另外，如果您可以添加类似于原始数据源或示例的内容，那就太好了link.

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

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

Edit function not saving changes to state data in React

javascript

reactjs

state

edit