反应状态更新不正确

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]);}