每次更新特定状态 React，重新启动函数

Question

我在 componant didmount 中创建了一个函数 (newdispo) 要创建预留可用性源， 它基于相对日期 从10：00到19：00(例如) 它将创建具有状态间隔的可用性(间隔) (例如 1 小时) 所以它向我显示了相对于今天日期"this.stat.day"的可用性 今天 (07/04/2020) 例： 04/07/2020 - 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

生命周期方法组件 DidUpdate 是您需要的，例如：

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