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

【问题标题】：UseState, UseEffect not updating state in reactjs. I am trying to add random number to stateUseState，UseEffect 不更新 reactjs 中的状态。我正在尝试向状态添加随机数
【发布时间】：2020-04-08 01:06:46
【问题描述】：

我正在尝试使用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;

【问题讨论】：

标签： javascript arrays reactjs facebook react-native

【解决方案1】：

setState 是异步的，这就是为什么您在 setState 之后看不到状态更新的原因。

从 "react" 导入 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

【讨论】：

【解决方案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;

【讨论】：

【解决方案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)
    );
 });

我在这里使用的逻辑略有不同，但你的也可以。

【讨论】：