UseState, UseEffect 不更新 reactjs 中的状态。 我正在尝试将随机数添加到状态

Question

I am trying to add list of random number in numberArray using useEffect and useState hooks, but I am console logging the result after the state is set in useEffect method, but its not updating the state.

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;

Answer 1

setState is async that's why you can't see the state updated right after setState.

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;

Moving console.log() out of the hook should solve your problem. You can see the result in log.

Check out https://codesandbox.io/s/dazzling-sinoussi-j42uu

Answer 2

Remove your console.log and spread your data as you are passing array itself.

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;

Answer 3

Moving console.log(numberArray); out of useEffect() hook will solve the issue.

As @kooskoos mentioned, setState() is async that's why you can't see the state updated right after setState() .

If you have no use for initial value [1,2,3,4,5] in your numberArray state, you can also have a callback function inside your useState() so that the random number array is populated as initial state, on the first render itself.

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

I'm using a slightly different logic here, but yours would work fine as well.