开发者问题收集

无法使用 API 渲染图像

2022-12-14
283

我正在使用多头像 API 在 UI 上渲染随机图像,但出现了以下错误。我也尝试使用承诺来渲染 UI,但未能获得结果。

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

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 [selectedPofilePic, setSelectedPofilePic] = useState(undefined);

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

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

  return (
    <div className="profilePage">
      <h1>Pick your favorite profile picture</h1>
      <div className="profilePics">
        {profilePic.map((pic, index) => {
          return (
            <div
              key={index}
              className={`pic ${selectedPofilePic === index ? "selected" : ""}`}
            >
              <img
                src={`data:image/svg+xml;base64,${pic}`}
                alt="profile pic"
                onClick={() => setSelectedPofilePic(index)}
              />
            </div>
          );
        })}
      </div>
      <ToastContainer />
    </div>
  );
}

export default ProfilePic;
2个回答
Since you were using the async you must have to use await keyword , otherwise it will return promises,and you should use the function inside the useEffect 

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 [selectedPofilePic, setSelectedPofilePic] = useState(undefined);

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

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

  return (
    <div className="profilePage">
      <h1>Pick your favorite profile picture</h1>
      <div className="profilePics">
        {profilePic.map((pic, index) => {
          return (
            <div
              key={index}
              className={`pic ${selectedPofilePic === index ? "selected" : ""}`}
            >
              <img
                src={`data:image/svg+xml;base64,${pic}`}
                alt="profile pic"
                onClick={() => setSelectedPofilePic(index)}
              />
            </div>
          );
        })}
      </div>
      <ToastContainer />
    </div>
  );
}

export default ProfilePic;

Hope this code will help you.
Happy Coding :)
Vijesh N K
2022-12-14

首先,我必须提到你使用了箭头函数,该函数未在代码的其他地方调用(准确地说是指 setProfilePicture )。

其次, async 关键字应该引用代码中的直接父函数,因此,如果您想使用 axios 获取一些 api,请使用 await axios ,然后将 async 传递给 useEffect 钩子内的箭头函数。

Mohammad Ghiasvand
2023-05-11