Verwendung von Async/Await in React-Renderfunktionen: Ein alternativer Ansatz

Asynchrone Programmierung kommt häufig in React-Anwendungen vor, insbesondere beim Umgang mit externen Datenquellen. Die Verwendung von Async und Wait direkt in der Renderfunktion von React kann jedoch zu unerwarteten Ergebnissen führen.

Um asynchrone Aufrufe effektiv in React zu integrieren, besteht ein gängiger Ansatz darin, Zustandsverwaltungstechniken zu nutzen. Dazu gehört das Abrufen von Daten in einer separaten Lebenszyklusmethode wie „componentDidMount“ oder die Verwendung von Hooks wie „useEffect“ und das Aktualisieren des Status, sobald die Daten verfügbar sind.

Betrachten Sie das folgende Beispiel:

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 ? (
      
    ) : null;
  }
}

const Child = ({ data }) => (
  
    {data.map((x, i) => (
      {x}
    ))}
  
);

Bei diesem Ansatz ruft die ParentThatFetches-Komponente Daten asynchron ab und aktualisiert ihren Status entsprechend. Sobald die Daten verfügbar sind, rendert es die untergeordnete Komponente, die die Daten anzeigt.

Alternativer Ansatz: Serverseitige Komponenten

React Server Components, eingeführt in React 18 bieten einen weiteren Ansatz für den Umgang mit asynchronen Daten in React-Anwendungen. Im Gegensatz zum herkömmlichen clientseitigen Rendering-Modell werden React Server-Komponenten auf dem Server gerendert, sodass Sie Daten abrufen und verarbeiten können, bevor der HTML-Code an den Client gesendet wird.

Hier ist ein aktualisiertes Beispiel, das React Server-Komponenten nutzt:

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 (
    
        {data.map(({ address, email, mobile }, index) => (
          
        ))}
      

      

            
{address}
            
Goa
            
asdsad
            
{email}
            
{mobile}
          
    
  );
}

In diesem Beispiel ruft die Funktion getAddressData die Adressen asynchron auf dem Server ab. Die GeoServerComponent-Funktion empfängt dann die Adressen als Requisiten und rendert den erforderlichen HTML-Code auf dem Server. Dieser Ansatz stellt sicher, dass die Daten bereit sind, bevor der HTML-Code an den Client gesendet wird, und löst die Probleme, die bei der Verwendung von Async und Wait direkt in der Renderfunktion auftreten.