Reactでの複数のAJAXリクエストのベストプラクティス？

Question

私はReactを使って個人的なプロジェクトを進めています。そこでは、Yahooの天気APIを使用して、それぞれ異なる都市のデータを提示する、いくつかのコンポーネントをレンダリングします。

最初は、私がデータを必要とする都市を含む配列にマッピングして、AJAX要求を行うコンポーネントに各都市を送りました。結果はそれぞれ独自の呼び出しを行った5-6の異なるコンポーネントです。現在の状況や、いくつかの異なる都市の高低を表現したいだけなら、うまくいきます。

しかし、私はそれを再描画する原因となる、ユーザーが都市をクリックする機能を提供するルータを反応させるのに使用したいと思いますが、その都市だけの詳細および10日間の予報を示しています。私が取り組んでいる問題は、プロジェクトの現在の構造です。私は親の都市の配列をマッピングしてAPI URLに渡すことができるので、すべての予測コンポーネントをレンダリングしています。

1つのビューが複数の気象コンポーネントで、もう1つがその都市の単一の詳細ビューと10日間の予測になるように、プロジェクトを構成し、AJAXリクエストを作成するより良い方法はありますか？

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 

だから6つの<Weather />コンポーネントをレンダリングするPLACES配列の上に親コンポーネントのマッピングです。そして<Weather />コンポーネントに私は、任意の方向のための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); 
    }) 
    } 

おかげで私のAJAX要求を作ってるんです！

Answer 1

Weatherコンポーネント内には、新しいコンポーネントに<Link>があり、ルートはweather/:locationのようになります。 :locationという表記は、chattanoogaのようにここで何でも受け入れることを意味します。都市と州の両方を渡す必要がある場合はweather/:city/:stateこのルートはあなたのパラメータを受け入れますので、それらを使用して、見たい特定の都市のAPIを再呼び出しし、新しいコンポーネントの10日間の予測を呼び出すことができます。

あなたはthis.props.match.params.locationまたはthis.props.match.params.cityを呼び出すことによって、新しいコンポーネントの内のparamにアクセスすることができ、など