So verwenden Sie Async Await in der React Render-Funktion mit Hooks

Async Await in React Render Function

Das Problem verstehen

In Ihrem Code, Sie Versuchen Sie, asynchrones Warten innerhalb der Kartenfunktion der Renderfunktion zu verwenden. Dieser Ansatz ist jedoch ungültig, da asynchrone Funktionen nicht direkt in der Renderfunktion verwendet werden können. Die Renderfunktion von React erwartet synchronen Code.

Richtiger Ansatz

Um asynchrone Vorgänge innerhalb der Renderfunktion zu verwenden, können Sie einem von zwei Ansätzen folgen:

1. Datenabruf und Komponententrennung

Trennung der Datenabruflogik in eine separate Komponente, die den asynchronen Vorgang abwickelt. Rendern Sie dann die UI-Komponente nur dann bedingt, wenn die Daten verfügbar sind.

class ParentComponent 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 }) => (
  <table>
    <tbody>
      {data.map((x, i) => (
        <tr key={i}>
          {x.map((y, j) => <td key={j}>{y}</td>)}
        </tr>
      ))}
    </tbody>
  </table>
);

2. Hooks mit Async-Effekt

Verwenden Sie React-Hooks, um asynchrone Vorgänge zu verwalten.

const ParentComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const getData = async () => {
      const resp = await fetch("/some/async/data");
      const json = await resp.json();
      setData(json);
    };
    getData();
  }, []);

  return data ? <Child data={data} /> : null;
};

Zusätzliche Hinweise

• Die Verwendung von Die Koordinaten im Beispiel können durch tatsächliche Längen- und Breitengrade ersetzt werden.
• Wenn Ihre Datensätze eindeutige Bezeichner haben, verwenden Sie diese für das Schlüsselattribut anstelle des Array-Index.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Async Await in der React Render-Funktion mit Hooks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!