Comprendre le rendu async React

Votre code imprime 0 car il s'agit de la valeur de la variable number au moment du rendu.

Vous utilisez le code suivant:

fetch("some.url")
    .then(res => res.json())
    .then(list => {
      for (let n of list) {
        numbers.push(n);
      }
    });

pour obtenir une nouvelle valeur de façon asynchrone, mais cela n'aura aucun effet: le composant est déjà rendu.

Si vous voulez l'actualiser, vous devez mettre votre numéro de variable dans l'état et utilisez setState () pour passer la nouvelle valeur.

Si vous souhaitez conserver les composants de fonction, vous devez utiliser la toute nouvelle fonctionnalité de hooks, qui devrait vous donner l'équivalent de setState.

C'est un composant fonctionnel ou un composant sans état . Il n'a pas son propre état. Donc, si vous changez la valeur de la variable nombres, ne changera pas l'état du composant. Si vous voulez vraiment utiliser un composant fonctionnel, vous devez écrire la logique de récupération de l'url et de mise à jour de l'état dans un composant avec état parent et passer la variable nombres comme accessoire au composant sans état.

Sinon, si vous n'avez pas besoin d'utiliser un composant fonctionnel. Remplacez-le par un composant de classe, placez la variable numbers comme paramètre d'état et modifiez-le via la méthode setState () , et tout devrait fonctionner comme prévu.

Je recommande cet article . < / p>

Astuce: Un composant fonctionnel peut désormais avoir un état via Hooks .

Vous pouvez utiliser le crochet useState pour créer un élément d'état qui est un tableau, et obtenir la liste des nombres avec useEffect et mettez à jour les nombres une fois la requête terminée.

Exemple

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

const { useState, useEffect } = React;

function getNumbers() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([1, 2, 3, 4, 5]);
    }, 1000);
  });
}

function App() {
  const [numbers, setNumbers] = useState([0]);

  useEffect(() => {
    getNumbers().then(list => {
      setNumbers(numbers => [...numbers, ...list]);
    });
  }, []);

  return <div className="App">The numbers: {numbers.join(", ")}</div>;
}

ReactDOM.render(<App />, document.getElementById("root"));

L'extrait de code ci-dessus vous aiderait à comprendre l'utilisation correcte des composants dumb (aka Stateless) et smart (Stateful) .

Commencez à y penser en utilisant réagir aux cycles de vie, pour le rendre encore plus clair

Dans l'extrait ci-dessus, render () a déjà été exécuté avec la valeur initiale

let numbers = [0];

et depuis le les modifications ne sont pas effectuées dans STATE ou PROPS, le nouveau rendu ne se produit pas et vous n'obtenez pas le résultat escompté.

Solution -

• Faire du composant fonctionnel un composant de classe, c'est-à-dire en faire un composant intelligent ou utiliser des crochets (useState) pour en faire un composant intelligent.
• Utilisez le forage prop, c'est-à-dire calculez la valeur dans le composant parent et transmettez-la au composant enfant à l'aide d'accessoires

Profitez de cette occasion pour préparer votre état d'esprit vers "PENSER EN RÉACTION"

En savoir plus sur Stateful vs Stateless

Dans la création du frontend, le rendu est la procédure la plus importante qu'un programmeur doit gérer. La méthode render) (dans React est la seule méthode nécessaire dans un composant de classe et est responsable de la définition de la vue à rendre dans la fenêtre du navigateur. Il existe de nombreuses subtilités sur le fonctionnement de cette approche, combinées à la manière intelligente dont React fonctionne. son concept de DOM virtuel, et les connaître profiterait grandement à tout développeur React en herbe. Pour une démonstration des habitudes discutées, je me référerai à ce codepen. rendre () 101 Render) (n'est, tout d'abord, pas appelable par l'utilisateur. Il fait partie du cycle de vie du composant React et est appelé par React à différentes phases de l'application, normalement lorsque le composant React est instancié pour la première fois, ou lorsque le composant L'état a été récemment modifié. Render ne prend aucun argument et renvoie l'élément JSX.Element contenant la hiérarchie de vues du composant actuel. Cette hiérarchie de vues sera ultérieurement convertie en HTML et affichée dans la fenêtre du navigateur. Dans le cycle de vie, voici les scénarios où le rendu est appelé:

Une fois le composant React instancié pour la première fois, après l'appel à constructor (). Après une mise à jour des accessoires du composant Après un appel à setState () Je recommanderais cet article - https://en.wikipedia.org/wiki/React_(web_framework ) pour comprendre les principes de base, d'abord.