反应-将状态传递给父组件-太多AXIOS请求

Question

I'm a beginner both in programming and React and I have to create a functioning google Map single page website. I'm using google-map-react.
I have a parent App.js (containing the call to and a HTML sidebar) and a child Map.js containing the map itself and axios request function. I'm making axios requests to fetch data from foursquare api. It works without side effects. Then I want to pass those data to my app.js and update the parent state so that I can renderthe locations on the sidebar.
This is the function I used (in Map.js). I had to put the call in componentWillReceiveProps as a last resource because componentDidMount didn't work:

https://jsfiddle.net/kd1yuhe5/

I think this may be the issue, but it's also the only way I found to make the list show:

this.props.updateVenues(this.state.venues)

This is the code from App.js

    updateVenues(venues) {
    this.setState({
        venues: venues,
    });
}

Then I called the method like this:

<Map updateVenues={this.updateVenues.bind(this)} />

The code works, venues are shown in the sidebar (if you need the code let me know, but I don't think it's relevant), but the I keep making requests until I exceed quota. Again: I'm a beginner. I just started 3 months ago.

EDIT: Here are both components:
Map.js
https://jsfiddle.net/kd1yuhe5/5/

App.js
https://jsfiddle.net/xwzrm4bp/2/

Answer 1

When the state of a React component is updated (and without custom implementation of componentShouldUpdate), it triggers a re render of that component (ie call the render function).

If the props of the children of this component have changed since the last render, they will also re render.

They re render because they have received new props, and this will also call their componentWillReceiveProps function.

Since you are fetching data each time Map will receive props, you are fetching data each time something change (state change) on App.

First in Map.js, this.props.query is assigned to this.state.query . This looks like an error, as in this case what you want are the new props receceived by componentWillReceiveProps, this is the first argument of this function. So you should assign props.query to this.state.query instead.

Except that actually you should not:

this.state.query is only used in componentWillReceiveProps, therefore there is no need to put props.query into state.query.

Second since you have both this.props.query from the previous props update and props.query which is the new received query, you have the opportunity to fetch only when the query has actually changed:

// Receive the update query from parent and fetch the data
componentWillReceiveProps(nextProps){
    if (this.props.query !== nextProps.query) {
        this.fetchData(nextProps.query);
    }
}

Now you may ask, "ok but why my Map component was always re rendered, even when its props didn't changed".

But they did: in App.js

<Map 
    query={this.state.query}
    center={this.state.center}
    updateVenues={this.updateVenues.bind(this)}
    getClickedMarker={this.getClickedMarker.bind(this)}
/>

By calling this.updateVenues.bind(this) and this.getClickedMarker.bind(this) in the render method, you are creating new values (actually new Function references)for the updateVenues and getClickedMarker props, at each render.

Instead, you should bind these method in the contructor of App:

constructor(props) {
    super(props);
    this.updateVenues = this.updateVenues.bind(this);
    this.getClickedMarker = this.getClickedMarker.bind(this);
    ....
}

....
<Map 
    query={this.state.query}
    center={this.state.center}
    updateVenues={this.updateVenues}
    getClickedMarker={this.getClickedMarker}
/>

This may limit your API calls a lot, you may also debounce them.