javascript - 分解によってコンポーネントの状態にアクセスするにはどうすればよいですか?

Question

componentWillMount() 関数内から this.state.timeRemaining 値にアクセスしようとしています。this.state オブジェクトを分解し、値の名前を「swag」に変更しました。console.log() ステートメントが「5」を出力することを期待していますが (状態を設定し、コールバック関数でこの print ステートメントを実行しているため)、代わりに「null」の値が出力されます。代わりに、console.log() ステートメントで this.state.timeRemaining を使用して「5」を出力できるため、これは構造破壊固有の問題であると考えています。これはなぜですか？これは文脈と関係がありますか？

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

componentWillMountこれは、更新されていないメソッドの最初の行で宣言された変数を読み取っているためです。名前を変更しなくても印刷nullされます。再度読み取るthis.state.timeRemainingと、更新された値が提供されます。