Ожидается: я пытаюсь получить доступ к данным состояния в переменной и манипулировать переменной. и снова я установлю установленную дату в установленное состояние.

Проблема: когда я назначаю состояние переменной, вместо того, чтобы просто копировать данные в состоянии, оно становится дубликатом самого состояния, следовательно, когда я манипулирую самим состоянием данных, оно изменяется.

Примечание. В приведенном ниже коде 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.

2
user3380358 1 Ноя 2019 в 04:48

3 ответа

В React вам нужно избегать прямые мутации состояний, поскольку это мешает React точно отслеживать происходящие изменения. Предполагая, что data - это массив, вы можете создать его копию следующим образом:

const tmpData = [...data];

Или

const tmpData = Array.from(data);

И отредактируйте его столько, сколько вам нужно, не вызывая нежелательных мутаций, прежде чем обновлять состояние с помощью setState

2
Chris B. 1 Ноя 2019 в 05:14

tmpData - это мелкая копия data. Поскольку ссылка из tmpData поддерживается из data через неглубокую копию, поэтому вы все еще мутируете data.

Попробуйте следующее:

const tmpData = data.slice()

Это создает новый массив, который должен разорвать ссылки на исходный массив, позволяя вам делать то, что вы хотели бы создать в следующем состоянии data. Надеюсь, это поможет

1
Stephen Collins 1 Ноя 2019 в 05:11

React использует мелкое сравнение, чтобы проверить, равны ли текущие объекты props и nextProps, а также текущее состояние и объекты nextState. Это означает, что если все ключи в состоянии имеют одинаковое значение, React никогда не будет повторно отображать компонент.

В вашем коде tmpData равно data, оба они являются индексом одного и того же объекта.

function shallowEqual(state, nextState) {
    if ( state === nextState) {
        return true; 
    }

    return Object.keys(state).every(key => state[key] === nextState[key]);
}
1
ZHANG Luyao 1 Ноя 2019 в 05:36