使用Multi Avatar API渲染图片遇TypeError参数类型异常求助

错误原因分析 #

你遇到的错误：

Uncaught TypeError: The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type undefined

核心问题是**axios.get返回的是Promise对象，你直接访问image.data时，请求还未完成，image.data的值是undefined**，将undefined传入Buffer构造函数就触发了类型错误。同时循环里用同步方式处理异步请求，导致所有请求还没拿到结果就更新了state，最终UI也无法正确渲染图片。

修复后的代码 #

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios";
import { profilePicRoute } from "../utils/apiRoutes";
import { Buffer } from "buffer";

function ProfilePic() {
  const api = "https://api.multiavatar.com";
  const navigate = useNavigate();
  const [profilePic, setProfilePic] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedProfilePic, setSelectedProfilePic] = useState(undefined); // 修正拼写错误

  const toastStyles = {
    position: "top-center",
  };

  const setProfilePicture = async () => {};
  
  useEffect(() => {
    const fetchAvatars = async () => {
      try {
        // 生成4个异步请求Promise
        const avatarPromises = Array.from({ length: 4 }, () => 
          axios.get(`${api}/${Math.round(Math.random() * 1000)}`, { responseType: 'text' })
        );
        // 等待所有请求完成
        const responses = await Promise.all(avatarPromises);
        // 将SVG文本转成base64格式
        const data = responses.map(res => {
          const buffer = Buffer.from(res.data);
          return buffer.toString("base64");
        });
        setProfilePic(data);
      } catch (error) {
        toast.error("加载头像失败，请重试", toastStyles);
        console.error("头像请求错误:", error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchAvatars();
  }, []);

  // 加载状态提示
  if (isLoading) {
    return <div className="profilePage">正在加载头像...</div>;
  }

  return (
    <div className="profilePage">
      <h1>选择你喜欢的头像</h1>
      <div className="profilePics">
        {profilePic.map((pic, index) => {
          return (
            <div
              key={index}
              className={`pic ${selectedProfilePic === index ? "selected" : ""}`}
            >
              <img
                src={`data:image/svg+xml;base64,${pic}`}
                alt="profile pic"
                onClick={() => setSelectedProfilePic(index)}
              />
            </div>
          );
        })}
      </div>
      <ToastContainer />
    </div>
  );
}

export default ProfilePic;

关键修复点 #

• 将异步逻辑封装到单独的fetchAvatars函数中，避免直接在useEffect回调中使用async（会触发React警告）。
• 用Promise.all批量处理多个请求，确保所有头像数据都返回后再更新state。
• 给axios请求添加responseType: 'text'，保证正确获取SVG文本数据。
• 使用Buffer.from()替代直接调用Buffer构造函数，更符合规范。
• 增加错误捕获和加载状态处理，提升用户体验。
• 修正了变量名拼写错误：selectedPofilePic → selectedProfilePic。

内容的提问来源于stack exchange，提问作者Gurudatt Puranik