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

Question

我是编程和React的初学者，我必须创建一个运行正常的Google Map单页网站。 我正在使用google-map-react。
我有一个父App.js（包含对的调用和HTML边栏）和一个子Map.js，其中包含了地图本身和axios请求功能。 我正在发出axios请求，以从foursquare api获取数据。 它没有副作用。 然后，我想将这些数据传递到我的app.js并更新父状态，以便可以在边栏上呈现位置。
这是我使用的功能（在Map.js中）。 我不得不将调用作为最后的资源放入componentWillReceiveProps中，因为componentDidMount不起作用：

https://jsfiddle.net/kd1yuhe5/

我认为这可能是问题所在，但这也是我发现显示该列表的唯一方法：

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

这是来自App.js的代码

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

然后我调用了这样的方法：

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

该代码有效，场地显示在侧边栏中（如果您需要该代码，请告诉我，但我认为这无关紧要），但是我会不断提出要求，直到超出配额为止。 再说一遍：我是一个初学者。 我是3个月前刚开始的​​。

编辑：这两个组件：
Map.js
https://jsfiddle.net/kd1yuhe5/5/

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

Answer 1

当React组件的状态被更新（并且没有componentShouldUpdate的自定义实现）时，它会触发该组件的重新渲染（即调用render函数）。

如果自上次渲染以来此组件的子代的props已经更改，它们也将重新渲染。

他们重新渲染是因为他们已经收到了新的道具，这也将调用其componentWillReceiveProps函数。

由于您是在Map每次收到道具时都在获取数据，因此您每次在App上发生任何更改（状态更改）时都在获取数据。

首先在Map.js中，将this.props.query分配给this.state.query 。 这看起来像一个错误，因为在这种情况下，您想要的是componentWillReceiveProps接收的新道具，这是此函数的第一个参数。 因此，您应该将props.query分配给this.state.query 。

除了实际上您不应：

this.state.query仅在componentWillReceiveProps中使用，因此无需将props.query放入state.query。

其次，由于您同时具有以前的props更新中的this.props.query和作为新接收到的查询的props.query，因此您只有在查询实际更改时才有机会获取：

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

现在，您可能会问：“好吧，为什么我的Map组件总是重新渲染，即使它的道具没有改变也是如此”。

但是他们做到了：在App.js中

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

通过调用this.updateVenues.bind(this)和this.getClickedMarker.bind(this)的渲染方法，您正在创建的updateVenues和getClickedMarker道具新值（实际上是新功能的引用），在每个渲染。

相反，您应该将这些方法绑定到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}
/>

这可能会限制您的API调用很多，也可以将它们反跳 。