反应状态更新不正确

Question

预期：我正在尝试访问变量中的状态数据并操作该变量。我将再次将处理的日期设置为 setstate。问题：当我将一个状态分配给一个变量时，它不是仅仅复制状态中的数据，而是成为状态本身的副本，因此当我操纵数据时，状态本身就是变化。注意：在下面的代码中，tmpData.splice是我更改tmpData变量时状态发生变化的地方。onRowAdd: newData => new Promise(resolve => {    setTimeout(() => {        {        const { data } = this.state;        const tmpData = data;        const tmpRowData = this.getRowData(this.state.valorenVal ? this.state.valorenVal : newData.nr ? newData.nr : '');        if (tmpRowData.length >= 1) {            if (newData.number && tmpRowData[0].nr) {                tmpRowData[0].number = newData.number ? newData.number : '';                tmpData.splice(tmpData.length, 0, tmpRowData[0]);                this.setState({ data: tmpData }, () => resolve());                this.setState({ valorenVal: '' });            } else {                this.setState({ data }, () => resolve());            }        } else {            this.setState({ data }, () => resolve());        }        }        resolve();    }, 1000);}),我是 React 的新手，这可能是一个愚蠢的问题，但您的回答将帮助我更好地理解 React。

Answer 1

在 React 中，您需要避免直接状态突变，因为它会阻止 React 准确跟踪发生的更改。假设data是一个数组，您可以像这样创建它的副本：

const tmpData = [...data];

或者

const tmpData = Array.from(data);

并根据需要编辑它，而不会在更新状态之前导致不需要的突变 setState

Answer 2

tmpData是 的浅拷贝data。由于引用 fromtmpData是data通过浅拷贝维护的，这就是为什么您仍在 mutating data。

请尝试以下操作：

const tmpData = data.slice()

这将创建一个新数组，该数组应该中断对原始数组的引用，从而允许您按照自己的意愿创建data. 希望能帮助到你

Answer 3

React 使用浅比较来检查当前 props 和 nextProps 对象以及当前 state 和 nextState 对象是否相等。这意味着如果状态中的所有键都具有相同的值，React 将永远不会重新渲染组件。

在您的代码tmpData中等于data，它们都是同一个对象的索引。

function shallowEqual(state, nextState) {

    if ( state === nextState) {

        return true; 

    }

    return Object.keys(state).every(key => state[key] === nextState[key]);

}