从子组件中的按钮清空父组件的状态答案

【问题标题】：Empty the state of parent component from button in child component从子组件中的按钮清空父组件的状态
【发布时间】：2018-11-30 18:55:42
【问题描述】：

我想在子组件中再次单击按钮后清除子组件的状态。

父组件

   constructor() {
            super();
            this.state = {
                events:[],
                alerts:[],
            };

          }


addEvent = newEvent => this.setState(state => {
    const {events} = state
    return { events: [...events, ...newEvent]}
  });

  addAlert = newAlert => this.setState(state =>{
    const {alerts} = state
    return {alerts: [...alerts, ...newAlert]
  });

 render(){

    const {events} = this.state
            const {alerts} = this.state
            console.log(alerts);
            return(
                <div >
                    <SearchFlight events={events} alerts={alerts} addAlert={this.addAlert} addEvent={this.addEvent} />

                        <Events events={events}/>
                        <Alerts alerts={alerts}/>

}

子组件

handleSubmit= event =>{
        const {addEvent} = this.props
        const {addAlert} = this.props
        event.preventDefault();
        //alert(this.state.search_flight_no);
        var airportValueSelected= this.state.airport;
        var flightValue= this.state.search_flight_no;
        var airportList= FlightInfo.Airport;
        var newEvents=[];
        var newAlerts=[];
        for(var rootKey in airportList){
          if(rootKey===airportValueSelected)
           {

               airportList[rootKey].forEach(element => {


                   if(element.flight_no===flightValue){

                    for(var m=0;m<element.Events.length;m++){

                     var singleEvent={
                       event_name:'',
                       date_time:'',
                     };

                      singleEvent.event_name=element.Events[m].event_name;
                      singleEvent.date_time=element.Events[m].date_time;
                      newEvents.push(singleEvent);
                    }

                    for(var s=0;s<element.Alerts.length;s++){

                      newAlerts.push(element.Alerts[s]["Alert"+(s+1)]);

                    }

                   }

               });
               if(newEvents.length<1 && newAlerts.length<1){
                this.setState({ open: true });
               }
               else{
                 console.log(newEvents);
                 console.log(newAlerts);
               }
               addAlert(newAlerts);  
               addEvent(newEvents);

           }
        }

当我单击并调用 handleSubmit 方法时，它会继续附加事件和警报，而不是将其设为 empty 并存储新值而不是 appending 以前的状态价值观。

【问题讨论】：

你的意思是只用当前提交的值更新 events 属性？？
@ShubhamKhatri 是的

标签： reactjs

【解决方案1】：

addEvents 和 addAlerts 附加值的原因是因为您只是在 state 中设置当前值，但在 setState 调用中使用扩展语法附加它们。你只需要写

addEvent = newEvent => this.setState({
    events: newEvent
  });

  addAlert = newAlert => this.setState({
      alerts: newAlert
  });

【讨论】：

工作，但你还没有告诉如何格式化const eachEventName= this.props.events.map((d) => <li key={d.event_name}>{d.event_name}</li>) const eachDateTime= this.props.events.map((d) => <li key={d.date_time}>{d.date_time}</li>) return( <div> {eachEventName} {eachDateTime} </div> ); 实际上我想要带有文本事件名称的按钮，然后低于该日期时间
你只需要this.props.events.map((event) => { <ul key={event.event_name}><li>{d.event_name}</li><li>{d.date_time}</li></ul>})
在<ul></ul> 中期望一个赋值或函数而不是一个锯子表达式
正确的方法是{this.props.events.map((event) => ( <ul key={event.event_name}><li>{event.event_name}</li><li>{event.date_time}</li></ul> ))}
是的，评论中有错别字