每次更新特定状态时重新启动功能

Question

我在组件 didmount 中创建了一个函数 (newdispo) 创建预订可用性供稿， 它基于相对日期 从 10:00 到 19:00（例如） 它将创建具有状态间隔的可用性（间隔） （例如 1 小时） 所以它向我显示了相对于今天日期“this.stat.day”的可用性 今天（2020 年 7 月 4 日） 例子： 2020 年 4 月 7 日 - 10:00 04/07/2020 - 11:00 等...

但是我想让页面灵活， 我在一周的第二天有一个导航栏，当我点击另一天时， 如果与所选日期更新，则状态“天”，

我希望在每次状态更新时重新启动函数 (newdispo) 并且每次我更改状态“间隔”或“天”时都会更新提要更改

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


  constructor(props) {
    super(props);
    this.state = {

     day :'07/04/2020',
     interval : '00:60:00',
     dispo: []

  }

 }



  componentDidMount(day,interval,newdispo){

    interval:this.state.interval
    day:this.state.day
    newdispo = [{ date:day
                  hour: ...},
                { date:day
                  hour: ...} ect..]

    this.setState=({ dispo: newdispo});
   }

   changeday = (e) => {

      this.setState=({ day:e.target})

      }

   changeinterval = (e) => {

      this.setState=({ interval : e.target })

      }


  render(){

  return (

   <button onclick={this.changeday}>08/04/2020</button>
   <button onclick={this.changeday}>09/04/2020</button>
   //ect..//

   < button onclick={this.changeinterval}>00:30:00</button>
     < button onclick={this.changeinterval}>02:00:00</button>
     //ect..//

    this.state.calendar.map((time) => {

     <button value:{time.date} >{ time.hour} </button>

     })}

   )

  }

Answer 1

生命周期方法componentDidUpdate是你需要的，例如：

componentDidUpdate( prevProps, prevState ) {

    if( this.state.day !== prevState.day ){
        this.setState=({
            dispo: [
                { date: ..., hour: ...},
                ...
            ]
        });
    }
}