ant-design-pro 中高级表单问题

Question

ant-design-pro，高级表单TableForm.js中点击触发的toggleEditable函数，是怎么把 editable: true 添加到 newData 中的。求帮忙解释const newData = data.map(item => ({ ...item }));

     toggleEditable = (e, key) => {
        e.preventDefault();
        const { data } = this.state;
        const newData = data.map(item => ({ ...item }));
        const target = this.getRowByKey(key, newData);
        if (target) {
          // 进入编辑状态时保存原始数据
          if (!target.editable) {
            this.cacheOriginData[key] = { ...target };
          }
          target.editable = !target.editable;
          this.setState({ data: newData });
        }
      };

Answer 1

// 这句话应该能看懂，就是把data数据复制给newData

    const newData = data.map(item => ({ ...item }));

// 调用getRowByKey方法返回newData或data里key等于key的那条数据给target，说白了就是获取到当前编辑行

    const target = this.getRowByKey(key, newData);

// 那么为什么就可以target.editable呢？这是应为data里的每条数据初始化的时候就有了啊

    newData.push({key: `NEW_TEMP_ID_${this.index}`,workId: '',name: '',department: '', editable: true, isNew: true,});