自我提升（项目中React及JavaScript遇到问题记录）自我提升：项目中React及JavaS

刚刚了解了费曼学习法，我认为有必要记录在项目开发中遇到的问题，进而不断丰富自己的经验。本篇文章用于记录在项目过程中遇到的问题及解决方案，进一步加深印象。
问题一：JavaScript数组在React中Setstate后数据变化但不渲染的问题及解决方案 【自我提升（项目中React及JavaScript遇到问题记录）】问题描述：如下图，基于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，此时原引用地址发生改变，则会重新渲染。代码如下：