Comment utiliser efficacement les appels asynchrones dans les fonctions React Render ?

Utilisation d'Async/Await dans les fonctions de rendu React : une approche alternative

La programmation asynchrone est souvent rencontrée dans les applications React, en particulier lorsqu'il s'agit de tâches externes. sources de données. Cependant, l'utilisation d'async et d'attente directement dans la fonction de rendu de React peut conduire à des résultats inattendus.

Pour intégrer efficacement les appels asynchrones dans React, une approche courante consiste à utiliser des techniques de gestion d'état. Cela implique de récupérer les données dans une méthode de cycle de vie distincte, telle que composantDidMount ou d'utiliser des hooks comme useEffect, et de mettre à jour l'état une fois les données disponibles.

Considérez l'exemple suivant :

<code class="javascript">class ParentThatFetches extends React.Component {
  constructor() {
    this.state = { data: null };
  }

  componentDidMount() {
    fetch("/some/async/data")
      .then(resp => resp.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return this.state.data ? (
      <Child data={this.state.data} />
    ) : null;
  }
}

const Child = ({ data }) => (
  <tr key={index}>
    {data.map((x, i) => (
      <td key={i}>{x}</td>
    ))}
  </tr>
);</code>

Dans Avec cette approche, le composant ParentThatFetches récupère les données de manière asynchrone et met à jour son état en conséquence. Une fois les données disponibles, le composant Enfant est restitué, qui affiche les données.

Approche alternative : composants côté serveur

Composants serveur React, introduits dans React 18 , fournissent une autre approche pour gérer les données asynchrones dans les applications React. Contrairement au modèle de rendu traditionnel côté client, les composants React Server sont rendus sur le serveur, vous permettant de récupérer et de traiter les données avant que le HTML ne soit envoyé au client.

Voici un exemple mis à jour qui exploite les composants React Server :

<code class="javascript">import Geocode from "react-geocode";
import _ from "lodash-es";

const getAddressData = async (getCompanyUserRidesData = []) =>
  Promise.all(
    getCompanyUserRidesData.map(async (userRides) => {
      const addr = await Geocode.fromLatLng(22.685131, 75.873468);
      const address = addr.results[0].formatted_address;
      const email = _.get(userRides, "driverId.email", "");
      const mobile = _.get(userRides, "driverId.mobile", "");
      return { address, email, mobile };
    })
  );

async function GeoServerComponent({ phase, getCompanyUserRidesData }) {
  const data = await getAddressData(getCompanyUserRidesData);
  return (
    <table>
      <tbody>
        {data.map(({ address, email, mobile }, index) => (
          <tr key={index}>
            <td>{address}</td>
            <td>Goa</td>
            <td>asdsad</td>
            <td>{email}</td>
            <td>{mobile}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}</code>

Dans cet exemple, la fonction getAddressData récupère les adresses de manière asynchrone sur le serveur. La fonction GeoServerComponent reçoit ensuite les adresses comme accessoires et restitue le code HTML nécessaire sur le serveur. Cette approche garantit que les données sont prêtes avant que le code HTML ne soit envoyé au client, résolvant ainsi les problèmes rencontrés lors de l'utilisation d'async et d'attente directement dans la fonction de rendu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!