关于antdesign:自我提升项目中React及JavaScript遇到问题记录

48次阅读

共计 2131 个字符,预计需要花费 6 分钟才能阅读完成。

刚刚理解了费曼学习法,我认为有必要记录在我的项目开发中遇到的问题,进而不断丰富本人的教训。本篇文章用于记录在我的项目过程中遇到的问题及解决方案,进一步加深印象。

问题一:JavaScript 数组在 React 中 Setstate 后数据变动但不渲染的问题及解决方案

问题形容:如下图,基于 Ant Design 的 Table 组件进行数据渲染,同时实现点击后数据上移、下移、删除的操作。
解决思路:通过点击回调函数获取到惟一标识符 key 值即序号。遍历数组判断是不是边界数据,即:上移时被点击的数据如果不是第一个、点击下移时的数据如果不是最初一个,则找到该条数据执行如下操作:被点击上移的 key-1,被点击的数据上一条 key+ 1 后,依据 key 值排序,从而实现上移、下移的性能。

性能实现代码如下:

  dealTableDataUp(text) {const {tableData} = this.state;
    let [...tableDataChange] = tableData;
    for (let i = 0; i < tableDataChange.length; i += 1) {if (i > 0) {if (text.key === tableDataChange[i].key) {tableDataChange[i].key = tableDataChange[i].key - 1;
          tableDataChange[i - 1].key = tableDataChange[i].key + 1;
        }
      }
    }
    tableDataChange = this.doSrotByAttribute(tableDataChange, `key`);
    this.setState({tableData: tableDataChange});
  }

  dealTableDataDown(text) {const {tableData} = this.state;
    let [...tableDataChange] = tableData;
    for (let i = 0; i < tableDataChange.length; i += 1) {if (i !== tableDataChange.length - 1) {if (text.key === tableDataChange[i].key) {tableDataChange[i].key = tableDataChange[i].key + 1;
          tableDataChange[i + 1].key = tableDataChange[i].key - 1;
        }
      }
    }
    tableDataChange = this.doSrotByAttribute(tableDataChange, `key`);
    this.setState({tableData: tableDataChange});
  }

  dealTableDataDelete(text) {const {tableData} = this.state;
    let [...tableDataChange] = tableData;
    let flag = false;
    for (let i = 0; i < tableDataChange.length; i += 1) {if (flag === true) {tableDataChange[i].key = tableDataChange[i].key - 1;
      }
      if (flag === false) {if (text.key === tableDataChange[i].key) {
          flag = true;
          tableDataChange.splice(i, 1);
          i -= 1;
        }
      }
    }
    tableDataChange = this.doSrotByAttribute(tableDataChange, `key`);
    this.setState({tableData: tableDataChange});
  }
// 排序代码
  doSrotByAttribute(arr, attribute) {function compare(propertyName) {return function (object1, object2) {const value1 = parseFloat(object1[propertyName]);
        const value2 = parseFloat(object2[propertyName]);
        if (value2 < value1) {return 1;}
        if (value2 > value1) {return -1;}
        return 0;
      }
    }

    arr.sort(compare(attribute));
    return arr;
  }

数据变动但不渲染问题起因:在 Java Script 中数组作为援用数据类型,定义的数组存储的是其首地址,而数据局部的变动是在堆中,因而当咱们从新 SetState 时,尽管 console.log()的数据曾经变动了,然而不会从新进行渲染,因而不会显示。
数据变动但不渲染问题解决办法:对原数组进行深拷贝,应用深拷贝后的数据进行 SetState,此时原援用地址产生扭转,则会从新渲染。代码如下:

    const {tableData} = this.state;
    let [...tableDataChange] = tableData;
    this.setState({tableData: tableDataChange});

正文完
 0