通过设置状态反应新给定值不会更新组件值

Question

我正在使用星期日历，因此我尝试将其制作成日历，以便我的日历可以显示将来的星期，并返回到当前星期。当单击按钮“前进”时，我想显示给我的状态一个新值。哪个工作正常（在控制台中工作），只是我的视图不变，所以我认为它不会使用新值更新组件。有谁知道我该怎么做才能使我的组件显示更新的值？

代码：

export default class Calendar extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      lastUid: 1,
      selectedIntervals: [],
      serviceDuration: 0,
      showCalendarDay:moment(),
    }
  }

  handleMoveToCurrentDay=(event)=>{
         this.setState({
           showCalendarDay:moment(),
         })
       }

  handleMoveToFutureDay=(event)=>{
    const day = this.state.showCalendarDay
    console.log('day', this.state.showCalendarDay)
    this.setState({
      showCalendarDay:day.add(7,'days'),
    })
    console.log('showCalendarDay', this.state.showCalendarDay)
}


  render() {

    return (
      <React.Fragment>

        <div id="calendar-page">
          <div id='calendar-header'>
            <div>
              <button onClick={this.handleMoveToCurrentDay}>Today</button>
              <button>previous</button>
              <button onClick={this.handleMoveToFutureDay}>forward</button>
            </div>

          </div>
          <WeekCalendar
            firstDay={this.state.showCalendarDay}
            startTime={moment({ h: 8, m: 0 })}
            endTime={moment({ h: 21, m: 0 })}
            scaleUnit={30}
            cellHeight={50}
            numberOfDays={7}
            selectedIntervals={this.state.selectedIntervals}
            modalComponent={CalenderModal}
            eventSpacing={20}
          />
        </div>
      </React.Fragment>
    )
  }
}

Answer 1

您可以在docs for moment中看到add突变了原始日期对象。

这表示您正在执行以下操作来改变状态：

const day = this.state.showCalendarDay
this.setState({
  showCalendarDay:day.add(7,'days'),
})

当您改变状态时，react并不总是能捕捉到更改，也没有任何方法知道应重新呈现。

您需要首先创建原始moment对象的副本。给出了更详细的解释here。

结果将是这样的：

const day = this.state.showCalendarDay.clone();
this.setState({
  showCalendarDay:day.add(7,'days'),
})