首页 > 解决方案 > 如何将 Moment 变量从渲染中重新定位到状态

问题描述

我想知道如何更好地将我正在使用的变量存储在我的反应组件中。

我已经尝试在下面的构造函数中声明变量setState,但这些变量是不可更改的。然后我尝试将变量存储在状态中,作为键值对,但由于其中一个值依赖于另一个值,因此它不起作用。

这是我当前的构造函数:

constructor(props) {
super(props);
this.state = {
  scooter: props.scooter,
  header: props.header,
  reservation: ""
};
}


componentWillReceiveProps(nextProps) {
this.setState({
  scooter: nextProps.scooter,
  header: nextProps.header
});
}

有些项目必须被调用,componentsWillRecieveProps因为项目会随着下一个道具而改变。

下面的变量

render() {
const reservation = this.state.scooter.state.LastAdminReservation;
var a = moment();
const c = moment(reservation.PendingDate);
const d = moment(reservation.EndDate);
const duration = d.from(c, true);
var timeSince = a.from(d, true);
const date = moment(reservation.DownloadAckDate).format("DD.MM.YYYY 
HH:mm"); 

我希望能够在我的回报中调用这些变量,var avar timeSince在下一个道具上进行更新,而不是将它们存储在我的渲染中,因为这是不好的做法。谢谢!

标签: javascriptreactjsmomentjsstate

解决方案


您可以这样做(放入将在其他方法中使用的仅状态变量。

constructor() {
    super();

    const a = moment();
    const c = moment(new Date());
    const d = moment(new Date());
    const duration = d.from(c, true);
    const timeSince = a.from(d, true);

    this.state = {
      name: 'React',
      timeSince
    };
  }

推荐阅读