React中多个AJAX请求的最佳实践？

Question

我正在使用React进行一个个人项目，在这个项目中，我想呈现几个组件，每个组件都使用Yahoo的天气API呈现来自不同城市的数据。

最初，我是通过一个包含我想要数据的城市的数组进行映射，将每个城市发送到发出AJAX请求的组件，结果是每个组件都有5到6个自己的呼叫。如果我只想呈现当前的情况或者几个不同的城市的高和低，那工作正常。

但我想用路由器做出反应，使用户点击一个城市的能力，从而导致重新绘制，显示该城市只有细节和一个10天的天气预报。我遇到的问题是项目的当前结构。因为我正在映射父级中的城市数组，所以我可以将其传递给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 />组件我做我的AJAX请求componentDidMount()

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访问您的新组件的内部帕拉姆等