ReactJS——我想为每个onChnage事件调用setState以将数组设置为空

我使用了空数组selectWeek[]，一旦发生了一个页面事件（日期从日期选择器更改），它应该总是空数组->selectWeek，然后根据代码向其中添加元素

下面的代码显示了一个事件，它不断地向数组selectedWeek添加日期！！但在每一个onChnage事件中，我只想获取空数组

代码： 从“React”导入React，{Component}； 从“反应日期选择器”导入日期选择器

import“react datepicker/dist/react datepicker.css”；
类时间表扩展组件{
建造师（道具）{
超级（道具）；
var startDate=新日期（）；
var today=新日期（），
this.state={
0:0，
1:0，
2:0，
3:0，
4:0，
总数：0，
当前日期：日期，
开始日期：开始日期，
当前日期：当前工作日，
周：[]，
selectedWeek:[]
};    
对于（var i=0；i{
console.log（“selectedWeek”+this.state.selectedWeek）；
控制台日志（日期）；
这是我的国家({
开始日期：日期
});
对于（var i=0；i{
如果（例如，target.id==“id0”）{
if（this.state.counter0==8）{
这是我的国家({
比分是0:8
});       
}
否则{
this.setState（prevState=>({
计数器0:prevState.counter0+1
}));
}      
}   
如果（例如，target.id==“id1”）{
if（this.state.counter1==8）{
这是我的国家({
反对1:8
});       
}
否则{
this.setState（prevState=>({
计数器1:prevState.counter1+1
}));
}      
}   
如果（例如，target.id==“id2”）{
if（this.state.counter2==8）{
这是我的国家({
反对票2:8
});       
}
否则{
this.setState（prevState=>({
计数器2:prevState.counter2+1
}));
}      
}   
如果（例如，target.id==“id3”）{
if（this.state.counter3==8）{
这是我的国家({
反对票3:8
});       
}
否则{
this.setState（prevState=>({
计数器3:prevState.counter3+1
}));
}      
}  
如果（例如，target.id==“id4”）{
if（this.state.counter4==8）{
这是我的国家({
第4:8节
});       
}
否则{
this.setState（prevState=>({
计数器4:prevState.counter4+1
}));
}      
}    
e、 预防默认值（）；
}
render（）{
返回(
{this.state.selectedWeek[1]？this.state.selectedWeek[1]：this.state.week[1]}
+  
- 
{console.log（this.state.week）}
{console.log（this.state.selectedWeek）}
{this.state.week[2]}{this.state.selectedWeek[2]}
e、 target.select（）}
值={this.state.counter1}
/>
+  
- 
{this.state.selectedWeek[3]？this.state.selectedWeek[3]：this.state.week[3]}
e、 target.select（）}
值={this.state.counter2}
/>
+  
- 
{this.state.selectedWeek[4]？this.state.selectedWeek[4]：this.state.week[4]}
e、 target.select（）}
值={this.state.counter3}
/>
+  
- 
{this.state.selectedWeek[5]？this.state.selectedWeek[5]：this.state.week[5]}
e、 target.select（）}
值={this.state.counter4}
/>
+  
- 
总数：
e、 target.select（）}
value={this.state.counter0+this.state.counter1+this.state.counter2+this.state.counter3+this.state.counter4}
/>
In ReactJS -- I want to display week calender in my timesheet app !! Weekly timesheet .
  [1]: https://i.stack.imgur.com/hPukx.png

import "react-datepicker/dist/react-datepicker.css";
class TimesheetForm extends Component {

    constructor(props){
        super(props);

        var startDate=new Date();
        var today = new Date(),
        this.state = {            
            counter0:0,
            counter1:0,
            counter2:0,
            counter3:0,
            counter4:0 ,
            total:0,
            currentDate: date,
            startDate: startDate,
            currentDay:currentWeekDay,
            week:[],
            selectedWeek:[]
    
          };    

          for (var i = 0; i <= 6; i++) {          
            var first = today.getDate() - today.getDay() + i            
            var day = new 
            Date(today.setDate(first)).toISOString().slice(0, 10)             
            this.state.week.push(day)
          }

          console.log(this.state.week); // gives me an array of all dates of week
        
    } 

handleDateChange = date => {
       
        console.log("selectedWeek"+this.state.selectedWeek);
        console.log(date);
        this.setState({
            startDate: date
          });
             
         for (var i = 0; i <= 6; i++) {          
            var first = date.getDate() - date.getDay() + i ;
            var day = new 
            Date(date.setDate(first)).toISOString().slice(0,10)  ;
             this.state.selectedWeek.push(day);
          }  
          console.log("shiv selectedWeek"+this.state.selectedWeek);
          
      };
    
    increment =(e)=> {
        if(e.target.id==="id0"){
        if(this.state.counter0=== 8){
            this.setState({
                counter0:8
            });       
        }
        else{
            this.setState(prevState => ({
                counter0: prevState.counter0 + 1
            }));

        }      
        }   
        if(e.target.id==="id1"){
            if(this.state.counter1=== 8){
                this.setState({
                    counter1:8
                });       
            }
            else{
                this.setState(prevState => ({
                    counter1: prevState.counter1 + 1
                }));
    
            }      
            }   
            if(e.target.id==="id2"){
                if(this.state.counter2=== 8){
                    this.setState({
                        counter2:8
                    });       
                }
                else{
                    this.setState(prevState => ({
                        counter2: prevState.counter2 + 1
                    }));
        
                }      
                }   
                if(e.target.id==="id3"){
                    if(this.state.counter3=== 8){
                        this.setState({
                            counter3:8
                        });       
                    }
                    else{
                        this.setState(prevState => ({
                            counter3: prevState.counter3 + 1
                        }));
            
                    }      
                    }  
                    if(e.target.id==="id4"){
                        if(this.state.counter4=== 8){
                            this.setState({
                                counter4:8
                            });       
                        }
                        else{
                            this.setState(prevState => ({
                                counter4: prevState.counter4 + 1
                            }));
                
                        }      
                        }    
                        e.preventDefault();
      }
 render(){

        return(
            <form >
               
                <DatePicker
                        selected={this.state.startDate}
                        onChange={this.handleDateChange}
                    />
 <table className="" align="right">
                <tr className="">
                    <td>
        <label>{this.state.selectedWeek[1] ? this.state.selectedWeek[1] :this.state.week[1] }</label>
                        <div>
                            <input
                            className="time-input"
                            type="text"  
                            size="1"                                
                            value={this.state.counter0}
                            />
                            <button id="id0" onClick = {this.increment}> + </button> 
                            <button id="id0" onClick = {this.decrement}> - </button>
                        </div>
                    </td>
                    <td className="">
                        {console.log(this.state.week)}
                        {console.log(this.state.selectedWeek)}
        <label >{this.state.week[2] }{this.state.selectedWeek[2]}</label>
                        <div>
                            <input
                            className="time-input"
                            type="text" 
                            size="1"                
                            //onClick={e => e.target.select()}                    
                            value={this.state.counter1}
                            />
                            <button id="id1" onClick = {this.increment}> + </button> 
                            <button id="id1" onClick = {this.decrement}> - </button>
                        </div>
                    </td>
                    <td className="">
                        <label >{this.state.selectedWeek[3] ? this.state.selectedWeek[3] :this.state.week[3] }</label>
                        <div>
                            <input
                            className="time-input"
                            type="text"    
                            size="1"             
                            //onClick={e => e.target.select()}                    
                            value={this.state.counter2}
                            />
                            <button id="id2" onClick = {this.increment}> + </button> 
                            <button id="id2" onClick = {this.decrement}> - </button>
                        </div>
                    </td>
                    <td className="">
                        <label >{this.state.selectedWeek[4] ? this.state.selectedWeek[4] :this.state.week[4] }</label>
                        <div>
                            <input
                            className="time-input"
                            type="text"  
                            size="1"               
                            //onClick={e => e.target.select()}                    
                            value={this.state.counter3}
                            />
                            <button id="id3" onClick = {this.increment}> + </button> 
                            <button id="id3" onClick = {this.decrement}> - </button>
                        </div>
                    </td>
                    <td className="">
                        <label >{this.state.selectedWeek[5] ? this.state.selectedWeek[5] :this.state.week[5] }</label>
                        <div>
                            <input
                            className="time-input"
                            type="text" 
                            size="1"                
                            //onClick={e => e.target.select()}                    
                            value={this.state.counter4}
                            />
                            <button id="id4" onClick = {this.increment}> + </button> 
                            <button id="id4" onClick = {this.decrement}> - </button>
                        </div>                    
                    </td>
                    <td className="">
                        <label >Total:</label>
                        <div>
                            <input
                            className="time-input"
                            type="text"   
                            size ="1"             
                            //onClick={e => e.target.select()}                    
                            value={this.state.counter0+this.state.counter1+this.state.counter2+this.state.counter3+this.state.counter4}
                            />                                                                
                        </div>
                    </td>
                </tr>                     
        </table>
}
}