useEffect两种异步写法调用Multiavatar API返回结果差异原因咨询

我在调用Multiavatar API获取SVG图片时遇到一个现象：直接将useEffect设为async函数时，能返回4张不同的图片；但在useEffect内部定义async函数loadData并调用时，却返回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);
}, []);

返回相同图片的代码： #

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();
}, []);

问题根源： #

这和useEffect的写法无关，纯粹是代码笔误：

• 正确代码中调用了Math.random()（带括号），每次都会生成一个0到1之间的随机数，乘以1000取整后得到不同的ID，因此请求到不同的图片。
• 错误代码中写的是Math.random（不带括号），这是函数本身的引用，而非调用函数生成随机数。Math.round会尝试将函数对象转换为数字，结果为NaN，再乘以1000还是NaN。这导致4次请求的API路径都是${api}/NaN，Multiavatar API对无效ID会返回默认图片，所以最终拿到4张相同的图。

内容的提问来源于stack exchange，提问作者Sohaib Butt