Comment utiliser Async Await dans la fonction React Render avec des 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>
);

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;
};

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!