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

Question

我正在制作周历，我正在尝试制作它，以便我的日历可以显示未来的周数并回到当前周。单击按钮 'forward' 时，我想显示为我的状态提供一个新值。哪个工作正常（它在控制台中工作）只是我的视图没有改变所以我认为它不会用新值更新组件。有谁知道我可以做些什么来让我的组件显示更新后的值？

代码：

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'),
})

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

React new given value by set-state doesn't update component value

state

setstate

momentjs

reactjs