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

【问题标题】：Edit function not saving changes to state data in React编辑功能不保存对 React 中状态数据的更改
【发布时间】：2020-04-04 19:33:45
【问题描述】：

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

这是状态结构

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

我希望能够编辑列表数组，特别是 id、name 和 type 属性，但我的函数似乎没有编辑它们？我目前传递数据，我想覆盖 id 名称并输入变量 eventData 和一个 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 (

【问题讨论】：

标签： javascript reactjs state edit

【解决方案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,
     });
   };

【讨论】：

当我实现这个时，我得到一个错误“无法读取另一个文件中未定义的属性'列表'，该文件使用地图显示表中的状态数据。似乎渲染更新的数据有问题到桌子上？请查看编辑后的帖子
@Captain Mhmdrz_A，我认为只使用 forEach 更容易解决。此外，.map 不会返回任何内容。 Reference
@RichardDesouza 如果事件数组中的任何 obj 没有 list 项，则会引发错误
@RobertFedus .forEach() 将改变原始数组，这只是对状态本身的另一个引用，REACT 建议我们不要直接改变状态，没有setState
@Captain Mhmdrz_A 当我在分配后尝试 console.log(eventListNew) 时返回 undefined

【解决方案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

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

【讨论】：

我正在为我的反应文件使用 javascript。似乎该代码只能与打字稿一起使用
不，是纯JS。您甚至可以在浏览器控制台上试用它。或者只是为它创建一个沙盒模型。
@RichardDesouza 这是 js
@Manish Sundriyal 它说类型只能在 ts 文件中使用，updatedList 下划线返回 {...event, list: updatedList);
@RichardDesouza 抱歉，有错字。已修复，立即尝试

【解决方案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,
     });
   };

【讨论】：