Meilleure pratique pour plusieurs requêtes AJAX dans React?

Question

Je travaille sur un projet personnel en utilisant React, dans lequel je veux rendre une poignée de composants, chacun présentant des données de différentes villes en utilisant l'API météo de Yahoo. Initialement, je mappais sur un tableau contenant les villes pour lesquelles je voulais des données, envoyant chaque ville à un composant qui effectue la requête AJAX, le résultat étant 5-6 composants différents qui ont chacun fait leur propre appel. Cela fonctionne bien si je veux juste rendre les conditions actuelles ou le haut et le bas pour plusieurs villes différentes.

Mais je voudrais utiliser React routeur pour donner aux utilisateurs la possibilité de cliquer sur une ville, ce qui provoque un nouveau rendu qui montre les détails et une prévision de 10 jours pour cette ville ne. Le problème que je rencontre est la structure actuelle du projet. Parce que je suis mappage sur le tableau de villes dans le parent afin que je puisse transmettre cela dans l'URL de l'API, je suis bloqué en rendant tous les composants de prévision. Quelle serait la meilleure façon de structurer le projet et de faire la requête AJAX de façon à ce que l'une des vues soit constituée de plusieurs composantes météorologiques et l'autre d'une seule vue détaillée et d'une prévision de 10 jours pour cette ville?

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 

Voilà le mappage de composant parent au-dessus de la matrice PLACES pour rendre les 6 <Weather /> composants. Et puis dans le composant <Weather /> je fais ma demande AJAX dans 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); 
    }) 
    } 

Merci pour toutes les directions!

Answer 1

A l'intérieur de votre composant Weather, vous devriez avoir un <Link> à un nouveau composant et la route ressemblerait weather/:location. La notation :location signifie que vous pouvez accepter n'importe quoi ici, comme chattanooga. Si vous devez passer à la fois la ville et l'état, faites weather/:city/:state Cette route acceptera vos paramètres et vous pourrez ensuite les utiliser pour rappeler l'API pour la ville spécifique que vous voulez voir et sa prévision de 10 jours dans votre nouveau composant .

Vous pouvez accéder à l'intérieur de votre param nouveau composant en appelant this.props.match.params.location ou this.props.match.params.city, etc.