React/Next.js中Axios无法获取数据问题排查

你的代码存在两个核心问题，导致数据无法正常加载显示：

1. 未执行数据请求函数
   你在useEffect内部定义了getdata异步请求函数，但没有调用它，API请求根本没有发起，posts始终保持初始的空数组状态，因此页面显示无记录提示。

2. useEffect缺少依赖数组
   未给useEffect设置依赖数组，虽然当前因未调用请求函数暂无影响，但正确的做法是添加空依赖数组，确保请求仅在组件挂载时执行一次，避免不必要的重复渲染。

修复后的代码 #

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

function Displaydata() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const getdata = async () => {
      try {
        const { data: res } = await axios.get(
          "xxxxxxxxxxxxxxxxxxxx/api/Allvideo"
        );
        console.log(res);
        // 若API返回的是包含数组的嵌套结构（如{ data: [...] }），需调整为setPosts(res.data)
        setPosts(res);
      } catch (err) {
        console.error("数据请求失败：", err);
      }
    };
    // 调用异步请求函数发起数据请求
    getdata();
  }, []); // 空依赖数组确保请求仅在组件挂载时执行一次

  return (
    <div>
      {posts?.length ? posts.map((product: { id: any; link: any; }) => (
        <p key={product.id}>
          {product.id}-{product.link}
        </p>
      )) : <h3>There are no records yet</h3>}
    </div>
  )
}

export default Displaydata

额外检查项 #

• 打开浏览器控制台，查看console.log(res)的输出结果：如果返回的是嵌套对象（比如{ list: [...] }），需要对应修改setPosts的参数，匹配实际返回的数据结构。
• 确认API返回的数组元素中确实包含id和link字段，避免渲染时出现数据缺失问题。

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