Реакция обновлений состояния неправильно - PullRequest
Новая
       53

Реакция обновлений состояния неправильно

2 голосов
/ 01 ноября 2019

Ожидается: Я пытаюсь получить доступ к данным состояния в переменной и манипулировать переменной. и снова я установлю манипулируемую дату в 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.

Ответы [ 3 ]

2 голосов
/ 01 ноября 2019

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

const tmpData = [...data];

или 

const tmpData = Array.from(data);

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

1 голос
/ 01 ноября 2019

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 голос
/ 01 ноября 2019

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

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

const tmpData = data.slice()

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

...