React状态更新不正确

Question

预期：我正在尝试访问变量中的状态数据并操作该变量。并且我将再次将操纵的日期设置为设置状态。

问题：当我为变量分配状态时，它不再只是复制状态中的数据，而是与状态本身重复，因此当我操作数据时，状态本身会发生变化。

注意：在下面的代码中，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的浅拷贝。由于来自tmpData的引用是通过浅拷贝从data维护的，所以这就是为什么您仍在更改data。

尝试以下操作：

const tmpData = data.slice()

这将创建一个新的数组，该数组应中断对原始数组的引用，从而允许您执行想要创建data的下一个状态的操作。希望它能帮助

Answer 3

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

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

function shallowEqual(state, nextState) {
if ( state === nextState) {
return true; 
}
return Object.keys(state).every(key => state[key] === nextState[key]);
}