從 ReactJS 中的 API 映射和渲染數據（函數組件）

Question

我正在學習反應。 需要從 ReactJS（函數組件）中的 tinyfac.es API 映射 5 個圖像。 正在正確獲取圖像（在控制台中）但無法呈現它。 如果可能，請解釋錯誤。 非常感謝:D

代碼：

import axios from "axios";
import React from "react";
import { useState, useEffect } from "react";

let base_url = `https://tinyfac.es/api/data?limit=50&quality=0`;

function Storyslider() {
  const [Containers, setContainers] = useState([]);
  useEffect(() => {
    axios
      .get(base_url)
      .then((a) => {
        console.log(a.data[0].url);
        setContainers(a.data.results);
      })
      .catch((b) => {
        console.log(Error);
      });
  }, []);
  return (
    <div>
      {Containers &&
        Containers.map((Contain, index) => (
          <img
            src={Contain.data[0].url}
            alt={Contain.data[0].gender}
            key={index}
          />
        ))}
    </div>
  );
}

導出默認的 Storyslider； 非常感謝:D

Answer 1

data對象中沒有results鍵。 所以這就是為什么您的數據沒有正確設置為Containers狀態。

這是您的工作代碼：

import axios from "axios";
import React from "react";
import { useState, useEffect } from "react";

let base_url = `https://tinyfac.es/api/data?limit=50&quality=0`;

function Storyslider() {
  const [Containers, setContainers] = useState([]);
  useEffect(() => {
    axios
      .get(base_url)
      .then((a) => {
        console.log(a.data);
        setContainers(a.data);
      })
      .catch((b) => {
        console.log(Error);
      });
  }, []);
  return (
    <div>
      {Containers &&
        Containers.map((Contain, index) => (
          <img
            src={Contain?.url}
            alt={Contain?.gender}
            key={index}
          />
        ))}
    </div>
  );
}

export default Storyslider

如果你想從數組渲染單個圖像（或第一張圖像），你可以簡單地做

{Containers && <img src={Containers[0].url} alt={Containers[0].gender} />}