Как правильно возвращать обновленное состояние при использовании метода жизненного цикла getDerivedStateFromProps?

#javascript #reactjs #react-lifecycle

Вопрос:

Например, у нас такое состояние:

state = { hasSomething: true, anotherKey: '', ... }

и мы должны обновлять только «непРиятности»:

 static getDerivedStateFromProps(nextProps) {
        if (nextProps.accessKey === 'admin') {
            return {
                hasSomething: false,
            };
        }
        return null;
    }
 

нужно ли нам разрушать предыдущее состояние, когда мы возвращаем новое состояние?
например, вот так:

 static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.accessKey === 'admin') {
        return {
            ...prevState,
            hasSomething: false,
        };
    }
    return null;
}
 

или нам это не нужно?
я проверил console.log(это.состояние), и он возвращает все локальное состояние, если я не выполняю деструкцию prevState.

я не могу найти эту информацию в официальной документации react 🙁

P.S. эта логика всего лишь пример 🙂

Ответ №1:

В официальной документации говорится It should return an object to update the state, or null to update nothing. (https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops). Это состояние не очищается, когда вы возвращаете только его часть, поэтому оно работает setState следующим образом (https://reactjs.org/docs/react-component.html#setstate). В setState документации говорится You may optionally pass an object as the first argument to setState() instead of a function. This performs a shallow merge of stateChange into the new state. , что вам не нужно разрушать предыдущее состояние.