Question

我有四个组件，分别名为UserHome，SearchFlight，事件和警报

我获得了要导入所有组件的UserHome组件

<SearchFlight/>
<Events />
<Alerts />

在 SearchFlight 中，我有一个带有两个输入和一个按钮的表单。当我单击按钮时，我正在调用一个函数，该函数将为我提供的相应输入计算一些JSON值（事件，警报数组），然后我想注入这些输入动态在“事件和警报”组件中。

constructor() {
        super();
        this.state = {
            open: false,
            airport: '',
            search_flight_no: '',
        };

      }

handleSubmit= event =>{
        event.preventDefault();

        var airportValueSelected= this.state.airport;
        var flightValue= this.state.search_flight_no;
        var airportList= FlightInfo.Airport;
        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;
                      this.state.events.push(singleEvent);
                    }

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

                      this.state.alerts.push(element.Alerts[s]["Alert"+(s+1)]);

                    }

                   }
                   // Here I am getting both events and alerts arrays
               });
               if(this.state.events.length<1 && this.state.alerts.length<1){
                this.setState({ open: true });
               }
               else{

               }


           }
        }

此代码将获取事件和警报数组，因此我已在获取注释的地方进行了注释。

这里是我的UserHome

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

      }

      setEvents = newEvents => this.setState({events: newEvents})


    render(){
        const {events} = this.state
        return(
            <div >
                <div style={{display:'inline-block',minHeight:'470px',}}>  
                <div className="clearfix visible-xs"></div>
                <div className="container">
                    <SearchFlight events={events} setEvents={this.setEvents} />
                </div>
                <div className="clearfix visible-xs"></div>
                <button className="btn btn-primary" style={{position:'absolute',right:'0',top:'62px',}}>
                <Link to={{pathname: "/"}}>LOGOUT</Link></button>

                </div>




            </div>
        );
    }

错误：无法读取未定义的推送属性

Answer 1

使用react哲学，您应该让UserHome拥有全局状态并将其传递给其子级（其他3个组件）。另外，当SearchFlight返回提交时，UserHome应该将一个函数传递给SearchFlight。

此函数将更新UserHome的状态，并允许其子级拥有更新的数据。

示例：

class UserHome extends Component {
  state = {
    events: []
  }

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

  render() {
    const {events} = this.state
    return (
      <>
        <SearchFlight events={events} addEvent={this.addEvent} />
        <Events events={events} />
        <Alerts events={events} />
      </>
    )
  }
}


class SearchFlight extends Component {
  handleSubmit = () => {
    const {addEvent} = this.props

    // create a new event here
    // const myNewEvent = {...}

    addEvent(myNewEvent)
  }
  render() {
    const {events} = this.props
    return (
      <button onClick={this.handleSubmit} />
    )
  }
}

在Reactjs中动态显示从一种状态到另一种状态的值

1 个答案: