javascript - react 状态更新不正确

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 中，你需要避免 direct state mutations ，因为它阻止 React 准确跟踪发生的变化。假设 data 是一个数组，您可以像这样创建它的副本:

const tmpData = [...data];

或

const tmpData = Array.from(data);

并在使用 setState 更新状态之前根据需要对其进行编辑，而不会导致不必要的突变