Question

我试图使用useEffect和useState挂钩在numberArray中添加随机数列表，但是我在用useEffect方法设置状态后控制台记录结果，但不会更新状态。

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是异步的，这就是为什么您无法在setState之后立即看到状态更新的原因。

从“反应”中导入React，{useState，useEffect};

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;

将console.log（）移出钩子应该可以解决您的问题。您可以在日志中查看结果。

签出https://codesandbox.io/s/dazzling-sinoussi-j42uu

Answer 2

删除console.log，并在传递数组本身时传播数据。

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

将console.log(numberArray);移出useEffect()钩子将解决此问题。

正如@kooskoos所述，setState()是异步的，这就是为什么您无法在setState()之后看到状态更新的原因。

如果在numberArray状态下不使用初始值[1,2,3,4,5]，则还可以在useState()内部使用回调函数，以便在第一个状态中将随机数数组填充为初始状态渲染自己。

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

我在这里使用的逻辑稍有不同，但是您的逻辑也可以正常工作。

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

3 个答案: