0

我正在尝试从 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
        });
        ...
    }
    ...
}
4

2 回答 2

0

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

  • 通过解构/解构const {timeRemaining: swag} = this.state，您正在创建一个新变量swag。这个变量将有新的内存分配给它，更新timeRemaining不会改变swag赋值时的timeRemaining值，值为null. 引用赋值仅适用object于 JS。

  • 此外，与您的问题没有直接关系，但值得知道使用componentWillMountwith从来都不是一个好主意React。自 React 16.3 起，此生命周期方法已被弃用：https ://reactjs.org/docs/react-component.html#unsafe_componentwillmount 。

于 2018-11-29T02:57:09.623 回答
0

componentWillMount那是因为您正在读取未更新的方法的第一行声明的变量。即使您不重命名它也会打印出来null。当您this.state.timeRemaining再次阅读时，它会提供更新的值。

于 2018-11-29T00:30:44.083 回答