React - 将状态传递给父组件 - AXIOS 请求过多

Question

我是编程和 React 的初学者，我必须创建一个功能正常的谷歌地图单页网站。我正在使用 google-map-react。
我有一个父 App.js（包含对 HTML 侧边栏的调用）和一个包含地图本身和 axios 请求函数的子 Map.js。 我正在发出 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）时，它会触发该组件的重新渲染（即调用渲染函数）。

如果该组件的子组件的 props 自上次渲染后发生了变化，它们也会重新渲染。

他们重新渲染是因为他们收到了新的 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 组件总是重新渲染，即使它的 props 没有改变”。

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

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

通过在 render 方法中调用 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 调用，您也可以debounce 他们。