调用Jikan API渲染FlatList时列表空白问题排查求助

核心问题 #

Jikan API v4返回的响应结构是包含data数组的对象，你直接将整个响应对象赋值给了state，而FlatList的data属性要求传入数组类型，导致无法渲染。

具体修复步骤 #

1. 修正API调用的state赋值
   把API调用中的setData(data)改为setData(data.data)，因为真正的动漫列表数据在响应对象的data字段里：

   const getData = () => {
       axios
       .get(apiCall)
       .then((res) => {
           const responseData = res.data
           console.log(responseData)
           // 取响应中的data数组赋值给state
           setData(responseData.data);
       })
       .catch((error) => {
           console.log(error);
       });
   };
   

2. 初始化state为空数组
   初始state设为undefined的话，FlatList在初始阶段无法识别数据类型，改为空数组：

   const [data, setData] = React.useState([]);
   

3. 确保API调用在组件挂载时执行
   添加useEffect钩子，在组件首次挂载时调用getData：

   React.useEffect(() => {
       getData();
   }, []);
   

4. 额外检查（可选）

   • 确认handleTruncate函数已正确定义，避免因函数不存在导致渲染错误
   • 检查item.images.jpg.image_url的路径是否正确（Jikan v4的动漫对象确实有这个字段）

完整修正后的API调用代码示例 #

const apiCall = "https://api.jikan.moe/v4/top/anime"
const [data, setData] = React.useState([]);

const getData = () => {
    axios
    .get(apiCall)
    .then((res) => {
        const responseData = res.data
        console.log(responseData)
        setData(responseData.data);
    })
    .catch((error) => {
        console.log(error);
    });
};

React.useEffect(() => {
    getData();
}, []);

内容的提问来源于stack exchange，提问作者Ekatama Ilham Prayoga