Question

我正在尝试从componentWillMount（）函数中访问this.state.timeRemaining值。我已经分解了this.state对象，并将值重命名为“ swag”。我希望我的console.log（）语句打印出“ 5”（因为我已经设置了状态并在回调函数中运行了该打印语句），但是却打印了“ 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时，它将提供更新的值。

Answer 2

您对JS中的变量和引用的理解和使用存在问题。

通过解构/解构const {timeRemaining: swag} = this.state，您正在创建一个新变量swag。该变量将分配有新的内存，更新timeRemaining不会更改swag的值，因为赋值时，timeRemaining的值为null。通过引用分配仅适用于JS中的object。
此外，与您的问题没有直接关系，但值得一提的是，将componentWillMount与React一起使用绝不是一个好主意。自从React 16.3：https://reactjs.org/docs/react-component.html#unsafe_componentwillmount开始不推荐使用此生命周期方法。

如何通过解构访问组件状态？

2 个答案: