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

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 с * никогда не является хорошей идеей1017 *.Этот метод жизненного цикла устарел с React 16.3: https://reactjs.org/docs/react-component.html#unsafe_componentwillmount.

Answer 2

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