reactjs useEffect中的async await函数在循环中返回相同的数据

roqulrg3  于 2023-01-25  发布在  React
关注(0)|答案(2)|浏览(145)

我从multiavatar API中获取svgs,但问题是当我在useEffect中编写函数时,它四次给我相同的值,但当我使useEffect异步时,它显示不同的值。
我只想知道为什么会这样?
它显示了4个不同的图像。

useEffect(async () => {
    const data = [];
    for (let i = 0; i < 4; i++) {
      const image = await axios.get(
        `${api}/${Math.round(Math.random() * 1000)}`
      );
      const buffer = new Buffer(image.data);
      data.push(buffer.toString("base64"));
    }
    setAvatars(data);
    setIsLoading(false);
  }, []);

这显示了4次相同的图像

useEffect(() => {
    const loadData = async () => {
      const data = [];
      for (let i = 0; i < 4; i++) {
        const image = await axios.get(
          `${api}/${Math.round(Math.random) * 1000}`
        );
        const buffer = new Buffer(image.data);
        data.push(buffer.toString("base64"));
      }
      setAvatars(data);
      setIsLoading(false);
    };

    loadData();
  }, []);
a8jjtwal

a8jjtwal1#

随机数发生器使用基于系统时钟的值作为种子。
这意味着,如果您创建两个随机示例,它们将使用相同的值进行初始化,因为系统时钟具有有限的分辨率。具有相同的种子意味着这两个示例将产生相同的结果序列。
尝试在sync函数之外或使用www.example.com创建随机值random.next

dsf9zpds

dsf9zpds2#

由于语法错误,未生成随机数。

useEffect(() => {
    const loadData = async () => {
      const data = [];
      for (let i = 0; i < 4; i++) {
        const image = await axios.get(
          `${api}/${Math.round(Math.random() * 1000)}`
        );
        const buffer = new Buffer(image.data);
        data.push(buffer.toString("base64"));
      }
      setAvatars(data);
      setIsLoading(false);
    };

    loadData();
  }, []);

相关问题