React函数组件调用tinyfac.es API获取图片后映射渲染失败问题

• 对API返回的数据结构理解错误：你在控制台打印的是a.data[0].url，说明接口返回的a.data本身就是存储人像数据的数组，不存在results字段。你执行setContainers(a.data.results)时，a.data.results为undefined，导致Containers状态始终是空数组，自然不会触发渲染。
• 遍历取值逻辑错误：即便Containers拿到了正确的数组，遍历得到的每一项Contain就是单个头像数据对象，不需要再嵌套data[0]取值，直接从Contain上取url、gender字段即可。
• 错误捕获逻辑不规范：catch中打印的是全局Error构造函数，而非接口返回的错误对象b，出现异常时无法正常定位问题。

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

// 需求是获取5张，limit参数直接设为5即可
let base_url = `https://tinyfac.es/api/data?limit=5&quality=0`;

function Storyslider() {
  const [Containers, setContainers] = useState([]);
  useEffect(() => {
    axios
      .get(base_url)
      .then((a) => {
        console.log(a.data[0].url);
        // 直接赋值a.data即可，不需要取results
        setContainers(a.data);
      })
      .catch((b) => {
        // 打印实际错误对象
        console.log(b);
      });
  }, []);
  return (
    <div>
      {Containers.map((Contain, index) => (
        <img
          // 直接从当前项取字段
          src={Contain.url}
          alt={Contain.gender}
          key={index}
        />
      ))}
    </div>
  );
}

export default Storyslider;

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