如何在React（Next.js）的useEffect中打印Axios结果并展示数据

1. 给异步请求添加错误捕获 #

你的请求逻辑没有处理异常情况，一旦请求失败就会静默无提示。修改useEffect中的代码，加入try/catch块排查问题：

useEffect(() => {
  const getPosts = async () => {
    try {
      const { data: res } = await axios.get(
        "https://diggdevelopment.com/blackstallion_new/api/get_demodata/"
      );
      // 不要用字符串拼接对象，改用逗号分隔才能正常打印完整结构
      console.log("here is data", res);
      setPosts(res);
    } catch (error) {
      // 打印错误信息，快速定位请求失败原因
      console.error("请求数据失败:", error);
    }
  };
  getPosts();
}, []);

2. 修正状态与渲染逻辑 #

状态变量命名存在单数/复数混淆，建议调整为更清晰的命名，同时优化空状态的展示：

// 修正状态命名，数组用复数更合理
const [posts, setPosts] = useState([]);

// 渲染部分对应修改
return (
  <>
    <table className="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Title</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        {posts.length > 0 ? (
          posts.map((post: any) => (
            <tr key={post.id}>
              <td>{post.id}</td>
              <td>{post.title}</td>
              <td><button>删除</button></td> {/* 补全Delete列内容 */}
            </tr>
          ))
        ) : (
          <tr>
            <td colSpan={3}>暂无数据</td> {/* 空状态给用户明确提示 */}
          </tr>
        )}
      </tbody>
    </table>
  </>
);

3. 确认API返回数据结构 #

请求成功后，检查接口返回的是否是数组格式。如果接口返回的是嵌套对象（比如{ data: [...] }），需要调整状态赋值逻辑，例如：

// 假设接口返回{ data: [数组数据] }
setPosts(res.data);

4. 可选：改用Next.js服务端数据获取 #

如果客户端请求遇到CORS或其他限制，可以用Next.js的服务端数据获取方法，避免客户端请求问题：

// 在组件外部添加服务端数据获取函数
export async function getServerSideProps() {
  try {
    const { data } = await axios.get(
      "https://diggdevelopment.com/blackstallion_new/api/get_demodata/"
    );
    return { props: { posts: data } };
  } catch (error) {
    console.error("获取数据失败:", error);
    return { props: { posts: [] } };
  }
}

// 组件直接接收props中的数据，无需useState和useEffect
const Test = ({ posts }: { posts: any[] }) => {
  return (
    <>
      <table className="table">
        {/* 表格结构同前 */}
      </table>
    </>
  );
};

export default Test;

关键提醒 #

• 异步请求必须加错误捕获，否则失败时无任何调试线索
• 打印对象时不要用字符串拼接，要用逗号分隔才能查看完整的对象结构
• 空状态要展示明确提示，避免用户看到空白页面

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