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

Question

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

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";

导入 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 中的状态。我正在尝试将随机数添加到状态

UseState, UseEffect not updating state in reactjs. I am trying to add random number to state

javascript

arrays

facebook

reactjs

react-native