useEffect 中的异步等待函数在循环中返回相同的数据答案

【问题标题】：async await function in useEffect returns same data on loopuseEffect 中的异步等待函数在循环中返回相同的数据
【发布时间】：2023-01-25 15:21:34
【问题描述】：

我正在从 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();
  }, []);

【问题讨论】：

标签： reactjs for-loop react-hooks async-await

【解决方案1】：

随机数生成器使用基于系统时钟的值来播种。

这意味着如果您在彼此之后不久创建两个 Random 实例，它们将使用相同的值进行初始化，因为系统时钟具有有限的分辨率。具有相同的种子意味着这两个实例将产生相同的结果序列。

【讨论】：