Können Sie Async Await direkt in einer React-Render-Funktion verwenden?

Async Await in der React-Renderfunktion

Problem:
Sie möchten die Async-Await-Funktion in der Renderfunktion eines React verwenden Komponente zum Durchführen asynchroner Vorgänge, z. B. dem Abrufen von Daten von einer Backend-API. Es treten jedoch Probleme auf, wenn das Schlüsselwort „await“ in der Renderfunktion nicht erkannt wird.

Lösung:

Während Sie das Schlüsselwort „async“ in der Rendermethode einer Klassenkomponente verwenden können , wird aus Leistungsgründen nicht empfohlen. Stattdessen ist es besser, das Abrufen und Anzeigen von Daten in zwei verschiedene Komponenten zu unterteilen:

Übergeordnete Komponente (Datenabruf):

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

  componentDidMount() {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => this.setState({ data }));
  }

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

Untergeordnete Komponente (Daten Anzeige):

<code class="javascript">const ChildComponent = ({ data }) => {
  return (
    <table>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};</code>

Erklärung:

• Die übergeordnete Komponente ParentComponent übernimmt das Abrufen der Daten von der API mithilfe der Abruffunktion.
• Sobald die Daten empfangen wurden, wird der Datenstatus festgelegt, der ein erneutes Rendern auslöst.
• In der Rendermethode prüft die übergeordnete Komponente, ob die Dateneigenschaft im Status vorhanden ist. Wenn dies der Fall ist, rendert es die untergeordnete Komponente ChildComponent und übergibt ihr die abgerufenen Daten als Requisiten.
• ChildComponent ist eine reine Funktionskomponente, die die Daten in einer Tabelle anzeigt.

Hinweis:

Für React-Hooks-basierte Komponenten können Sie den useEffect-Hook verwenden, um Daten abzurufen und den Komponentenstatus zu aktualisieren, wodurch die Datenabruflogik von der Renderfunktion getrennt wird.

Das obige ist der detaillierte Inhalt vonKönnen Sie Async Await direkt in einer React-Render-Funktion verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!