Maison > interface Web > js tutoriel > Comment utiliser Async Await dans la fonction React Render avec des hooks

Comment utiliser Async Await dans la fonction React Render avec des hooks

Susan Sarandon
Libérer: 2024-10-18 15:27:03
original
260 Les gens l'ont consulté

How to Use Async Await in React Render Function with Hooks

Async Await in React Render Function

Comprendre le problème

Dans votre code, vous essayez d'utiliser l'attente asynchrone dans la fonction map de la fonction de rendu. Cependant, cette approche n'est pas valide car les fonctions asynchrones ne peuvent pas être utilisées directement dans la fonction de rendu. La fonction de rendu de React attend du code synchrone.

Approche correcte

Pour utiliser des opérations asynchrones dans la fonction de rendu, vous pouvez suivre l'une des deux approches suivantes :

1. Récupération de données et séparation des composants

Séparez la logique de récupération de données en un composant distinct qui gère l'opération asynchrone. Ensuite, effectuez le rendu conditionnel du composant d'interface utilisateur uniquement lorsque les données sont disponibles.

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>
);
Copier après la connexion

2. Hooks avec effet asynchrone

Utilisez les hooks React pour gérer les opérations asynchrones.

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;
};
Copier après la connexion

Notes supplémentaires

  • L'utilisation de les coordonnées dans l'exemple peuvent être remplacées par des valeurs réelles de longitude et de latitude.
  • Si vos enregistrements de données ont des identifiants uniques, utilisez ceux de l'attribut clé au lieu de l'index du tableau.

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!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal