时间戳

首页 > 解决方案 > 每次更新特定状态时重新启动功能

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

问题描述

我在组件 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>

     })}

   )

  }

标签： javascriptreactjsreact-component

解决方案

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

componentDidUpdate( prevProps, prevState ) {

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

推荐阅读