多个AJAX请求的最佳实践反应？

Question

我正在开发一个使用React的个人项目，在这个项目中，我希望呈现几个组件，每个组件使用Yahoo的天气API显示来自不同城市的数据。

最初，我在一个包含我想要数据的城市的数组上映射，将每个城市发送到一个发出AJAX请求的组件，结果是5-6个不同的组件，每个组件都进行了自己的调用。如果我只想呈现几个不同城市的当前状况或高低，那就很好了。

但是我想使用Reactive路由器来让用户能够点击一个城市，从而重新呈现一个显示详细信息和10天预测的城市only。我遇到的问题是项目的当前结构。因为我在父类中的城市数组上映射，所以我可以将它传递到API URL中，所以我不得不绘制所有的预测组件。

怎样才能更好地构造项目并发出AJAX请求，以便一个视图是几个天气组件，另一个视图是该城市的单一详细视图和10天预测？

class App extends Component {

 PLACES = [
   { city: "chattanooga", state: "tn"},
   { city: "easton", state: "md"},
   { city: "new york", state: "ny"},
   { city: "norfolk", state: "va"},
   { city: "milford", state: "de"},
   { city: "bangkok", state: null}
 ]

 render() {
   return (
     <div className="weather-container">
       {
         this.PLACES.map( (place, id) => {
           return <Weather key={place.city} id={id} city={place.city} 
                  state={place.state} />
         })
       }
     </div>
   )
  }
}

export default App

这就是PLACES数组上的父组件映射，用于呈现6个<Weather />组件。然后在<Weather />组件中，我使用componentDidMount()进行AJAX请求

componentDidMount() {
    axios.get(`https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22${this.props.city}%2C%2$${this.props.state}%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys`)
    .then(res => {
      let data = res.data.query.results.channel;
      this.setState({ data : data });
    })
    .catch( (error) => {
      console.log(error);
    })
  }

谢谢你的指导！

Answer 1

在您的Weather组件中，您应该有一个到新组件的<Link>，并且路由看起来类似于weather/:location。:location表示法意味着您可以在这里接受任何东西，比如chattanooga。如果您需要同时通过城市和州，只需执行weather/:city/:state，此路由将接受您的参数，然后您可以使用这些参数重新调用您想要看到的特定城市的API，并在您的新组件中使用它的10天预测。

您可以通过调用this.props.match.params.location或this.props.match.params.city等方式访问新组件中的param。