Question

我想从“ A”组件更新主要组件的状态，然后将其推到“ B”组件，然后使用其渲染来动态填充框。

主要组件：

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

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

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

render(){
    const {events} = this.state
    const {alerts} = this.state
    console.log(events) // events are empty even after I pass and store it 
                        //   in SearchFlight Component  
    return(
        <div >

                <SearchFlight events={events} alerts={alerts} addAlert={this.addAlert} addEvent={this.addEvent} />
                <Events events={events}/>
                <Alerts />
            </div>

    );

}

SearchFlight组件（一个组件）：

handleSubmit= event =>{
        const {addEvent} = this.props
        const {addAlert} = this.props
        event.preventDefault();

        var newEvents=[];
        var newAlerts=[];


                 var singleEvent={
                   event_name:'home',
                   date_time:'12-08-18 12:45 AM',
                 };

                  newEvents.push(singleEvent);

                  newAlerts.push("Remove the luggage tag");

           addAlert(newAlerts);  
           addEvent(newEvents);

    }

然后我有事件组件（B组件），现在仅具有render方法。我想在这里获取更新的事件。

问题：当我在 Main Component

的呈现方法中执行console.log(events)时得到空事件

Answer 1

状态对组件是私有的。如果使用prop将状态传递给子组件，则应再次按照reactjs指南对prop进行更改。

您只能从道具中读取组件A中的值，并修改该值以将其进一步传递给嵌套的组件。但是不能从A修改主要组件的状态。

查看以下内容：https://reactjs.org/docs/state-and-lifecycle.html

Answer 2

您在addEvents和addAlerts方法中没有正确使用setState。 setState的回调模式需要返回一个对象

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

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

此外，由于事件是对象的数组，因此您需要对其进行迭代以呈现。请参阅How to render an array of objects in React?答案以获取有关如何执行此操作的更多详细信息

Answer 3

正如OneJeet React所指出的那样，所有都是关于自顶向下方法的，子组件不应该知道父组件是无状态还是有状态的。

将setState作为函数传递并允许子组件调用它是不好的做法。一种方法是使用redux，而无需从子组件更新父状态或以其他方式重新构建整个事物。

从React.js中的另一个组件更新状态

3 个答案: