1
votes

UseState, UseEffect ne met pas à jour l'état dans reactjs. J'essaye d'ajouter un nombre aléatoire à l'état

J'essaie d'ajouter une liste de nombres aléatoires dans numberArray en utilisant les hooks useEffect et useState , mais je suis en train d'enregistrer le résultat après le l'état est défini dans la méthode useEffect , mais il ne met pas à jour l'état.

import React, { useState,useEffect } from 'react';

const SortingTry = () => {
    const [numberArray, setNumberArray] = useState([1,2,3,4,5]);

    const ferin = () => {
        var value = [];
        var n = 100;
        var min = 5;
        var max = 500;
        for (var i = 0; i < n; i++) {
            value.push(Math.floor(Math.random() * (max - min + 1) + min));
        }
        return value;
    }
    useEffect(()=>{
        const data = ferin();
        setNumberArray([data]);
        console.log(numberArray);
    },[]);
    return (
        <h1>Generate Random Number</h1>
    );
}

export default SortingTry;

javascript reactjs react-native arrays facebook

0 commentaires

3 Réponses :

1
votes

setState est asynchrone, c'est pourquoi vous ne pouvez pas voir l'état mis à jour juste après setState.

import React, {useState, useEffect} de "react";

const SortingTry = () => {
  const [numberArray, setNumberArray] = useState([1, 2, 3, 4, 5]);

  const ferin = () => {
    var value = [];
    var n = 100;
    var min = 5;
    var max = 500;
    for (var i = 0; i < n; i++) {
      value.push(Math.floor(Math.random() * (max - min + 1) + min));
    }
    return value;
  };
  useEffect(() => {
    const data = ferin();
    setNumberArray([data]);
  }, []);
  console.log(numberArray);
  return <h1>Generate Random Number</h1>;
};

export default SortingTry;

Déplacer console.log () hors du hook devrait résoudre votre problème. Vous pouvez voir le résultat dans le journal.

Consultez https: // codesandbox .io / s / dazzling-sinoussi-j42uu

0 commentaires

0
votes

Supprimez votre console.log et répartissez vos données lorsque vous passez le tableau lui-même.

import React, { useState,useEffect } from 'react';

const SortingTry = () => {
    const [numberArray, setNumberArray] = useState([1,2,3,4,5]);

    const ferin = () => {
        var value = [];
        var n = 100;
        var min = 5;
        var max = 500;
        for (var i = 0; i < n; i++) {
            value.push(Math.floor(Math.random() * (max - min + 1) + min));
        }
        return value;
    }
    useEffect(()=>{
        const data = ferin();
        setNumberArray([...data]);
    },[]);
    return (
        <h1>Generate Random Number</h1>
    );
}

export default SortingTry;

0 commentaires

0
votes

Déplacer console.log (numberArray); hors du hook useEffect () résoudra le problème.

Comme @kooskoos l'a mentionné, setState () est asynchrone, c'est pourquoi vous ne pouvez pas voir l'état mis à jour juste après setState().

Si vous n'avez pas besoin de la valeur initiale [1, 2,3,4,5] dans votre état numberArray, vous pouvez également avoir une fonction de rappel dans votre useState () afin que le tableau de nombres aléatoires soit rempli comme état initial, sur le d'abord se rendre.

const [numberArray, setNumberArray] = useState(() => {
    const n = 100;
    const min = 5;
    const max = 500;
    return [...new Array(n)].map(() =>
      Math.round(Math.random() * (max - min + 1) + min)
    );
 });

J'utilise une logique légèrement différente ici, mais la vôtre fonctionnerait bien aussi.

0 commentaires