Как я могу получить доступ к состоянию моего компонента через деструктуризацию?

Question

Я пытаюсь получить доступ к значению this.state.timeRemaining из функции componentWillMount(). Я деструктурировал объект this.state и переименовал значение в "swag". Я ожидаю, что мой оператор console.log() выведет "5" (так как я установил состояние и запустил этот оператор print в функции обратного вызова), но вместо этого будет напечатано значение "null". Я считаю, что это проблема, связанная с деструктуризацией, поскольку я могу вывести "5", используя вместо этого this.state.timeRemaining в операторе console.log(). Есть идеи, почему это? Это как-то связано с контекстом?

class Favr extends Component {

    constructor(props) {
        super(props);
        this.state = {detailsAreShowing: false, timeRemaining: null};
        this.showDetails = this.showDetails.bind(this);
    }

    componentWillMount() {
        const { timeRemaining: swag } = this.state;
        const { favr: {expirationTime} } = this.props;
        let remainingTimeInMil = expirationTime.getTime() - Date.now();
        this.setState({timeRemaining: 5}, () => {
            console.log(swag); // prints null
        });
        ...
    }
    ...
}

Answer 1

Существует проблема с вашим пониманием и использованием переменных и ссылок в JS.

• Разрушением / деконструкцией const {timeRemaining: swag} = this.state, вы создаете новую переменную swag, Эта переменная будет выделена новая память, обновление timeRemaining не изменит значение swag на момент назначения, timeRemaining имеет значение null, Назначение по ссылке работает только с object в JS.

• Кроме того, не имеет прямого отношения к вашему вопросу, но стоит знать, что никогда не стоит использовать componentWillMount с React, Этот метод жизненного цикла устарел с момента реакции 16.3: https://reactjs.org/docs/react-component.html.

Answer 2

Это потому, что вы читаете объявленную переменную в первой строке componentWillMount метод, который не обновляется. Даже если вы не переименуете его, он напечатает null также. Когда ты читаешь this.state.timeRemaining снова это обеспечивает обновленное значение.