React中Axios请求Jikan API成功但无法渲染返回内容如何解决

• 数据字段访问路径错误：你修改为setAnimes(response.data.data)获取角色数组的操作是正确的，但Jikan v4接口返回的角色数组中，每个条目并不是直接挂载头像、名字字段，所有角色核心信息都嵌套在条目下的character对象内：
  • 角色名称的正确路径是条目.character.name，你之前写的条目.name拿到的是undefined
  • 角色头像的正确路径是条目.character.images.jpg.image_url，你之前写的条目.image_url拿到的是undefined
    这就是img标签的src、alt属性为空的直接原因。
• 初始赋值逻辑错误：最开始写setAnimes(response.data)时，拿到的是接口完整响应体（一个对象，不是数组），此时animes.length值为undefined，判断条件不成立，根本不会进入map渲染逻辑。
• 你打印setAnimes看到dispatchSetState相关代码是完全正常的现象：setAnimes本身就是React内部封装的状态调度函数，打印它输出内部实现源码不代表报错，和渲染失败没有任何关联，不需要在这部分排查。

请求逻辑部分 #

const [animes, setAnimes] = useState([]);

useEffect(() => {
    axios
        .get("https://api.jikan.moe/v4/anime/38000/characters")
        .then((response) => {
            // 直接取响应体data下的角色数组
            setAnimes(response.data.data);
        })
        .catch((err) => {
            console.log(err);
        });
}, []);

渲染逻辑部分 #

<div className="container">
    {animes.length > 0 &&
        animes.slice(0, 9).map((characterItem, index) => {
            return (
                <img
                    key={index}
                    // 按正确嵌套路径取头像地址
                    src={characterItem.character.images.jpg.image_url}
                    // 按正确嵌套路径取角色名
                    alt={characterItem.character.name}
                />
            );
        })}
</div>

排查提示：后续遇到类似字段取不到的问题，直接在map回调里打印单个循环项，就能直接看到字段的实际嵌套结构，不需要猜测路径。

内容的提问来源于stack exchange，提问作者Carlos Henrique R. Pereira