CODEWITHSUNDEEP
javascriptreactjsaxios
Matiny
Matiny

Reputation: 179

How can I access the object properties loaded with axios?

I'm making a site that is to store variables from a JSON file, then I can show that data. I'm attempting to pull data from an object, but I keep getting undefined or empty arrays/objects.

Here's content from my parent component. 

export default class App extends Component {
    constructor(){
        super();
        this.state = {
            arrival: {}
        }
    }

    axiosFunc = () => {
        axios.get('https://api.warframestat.us/pc').then(results => {
            this.setState({
                arrival: results.data.voidTrader.activation,
            });
            setTimeout(this.axiosFunc,1000 * 60);
        })
    }

    componentDidMount() {
        this.axiosFunc();
    }
}

Next, in the child component, I use props to store the arrival data.

<Baro arrival={this.state.arrival}/>

However, when I switch to the child component's file to show the data, I get an empty object...

componentDidMount(){
    console.log(this.props.arrival)
}

How can I make the proper data show?

Upvotes: 0

Views: 561

Answers (1)

psgivens
psgivens

Reputation: 66

Your child component may be mounting before the GET request has resolved. That console log you showed is in componentDidMount. Try console logging it from componentWillReceiveProps or componentDidUpdate and see if the data is getting there a little later.

Alternatively, install the excellent React Dev Tools Chrome extension and watch the component's props in real time.

Upvotes: 1

Related Questions