为什么子组件在React中无法通过Axios获得父项的道具

Question

I solve it with a simple flag like so:

1. I added a new flag property on the states object: loaded:false

2. I update the loaded value to true, when i get the data, like so:

     helpers.getValues().then(results => this.setState({values:results.data,loaded:true})); 

3. And finally, inside the render() i first check if the loaded==true and then i render the ChildComponent, like so :

    {this.state.loaded == true ? <ChildComponent values={this.state.values} name="theodore"/> : ''} 

---

I am making a simple code in React that gets data with Axios .

The data are returned to the client , so the communication is OK. The problem is that I pass the results data to a child component , as props, and as soon as the child component loads it asks for the props.data but it is empty.

Below is the Parent component:

1. Inside the componentDidMount I call the axios to get the data and update the setState object.

2. Below, into the render function, I pass the results to the ChildComponent .

    var ParentComponent = React.createClass({ getInitialState:function(){ return { values:'' activeTab:0 } }, componentDidMount:function(){ helpers.getValues().then(results => this.setState({values:results.data})); }, render:function(){ return( <div className='container'> <div className="row"> <div className="col-sm-8 text-center" > <h1>{pageTitle}</h1> <Tabs activeKey={this.state.activeTab} onSelect={this.handleSelect} id="controlled-tab-example"> <Tab eventKey={tabs[0].key} title={tabs[0].name}> Tab1 <ChildComponent1 values={this.state.values} test="ok"/> </Tab> <Tab eventKey={tabs[1].key} title={tabs[1].name}>Tab2</Tab> </Tabs> </div> </div> </div> ) } 

And here i show the ChildComponent(in a seperate js file).

Inside the componentDidMount I try to show the props but the object that gets it like: {values:'',test:'ok'}

var ChildComponent = React.createClass({
    componentDidMount:function(){
        console.log(this.props);
    },
    render:function(){
        return(
            <div>
                <ul>'nothing'</ul>
            </div>
        )
    }
});

I guess that it is a delay issue, in which the chld component loads before the axios async returns the data from server

Any help from someone that has dealt with a similar situation would be appriciated, thanks.

Answer 1

Because you're passing this.state.movies , instead of this.state.values to the ChildComponent .

How you do it :

<ChildComponent1 values={this.state.movies} test="ok"/>

How it should be :

<ChildComponent1 values={this.state.values} test="ok"/>