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

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

问题一：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});