ReactHooks, Next.js 与 Axios一起使用的问题

最新推荐文章于 2024-08-18 10:39:55 发布

eswang

最新推荐文章于 2024-08-18 10:39:55 发布

阅读量8k

点赞数 3

分类专栏： React 学习日记

本文链接：https://blog.csdn.net/weixin_43870742/article/details/102694249

版权

本文探讨在React Hooks和Next.js框架下，如何正确使用Axios获取接口数据。传统的在useEffect中获取数据的方法会导致无限循环，通过官方推荐的方式，可以在Next.js的getStaticProps或getServerSideProps中进行数据预取。

摘要由CSDN通过智能技术生成

前言

关于ReactHooks的介绍这里就不多说了，同时网上也有很多关于如何把React和Axios结合在一起使用的教程，近来也有很多如何使用ReactHooks和Axios一起使用的教程，这些教程获取接口数据的方式大多是用生命周期函数，包括在Hooks之前的生命周期函数以及Hooks中的新生命周期函数useEffect。而在Next.js这个SSR框架中情况是不一样的。

Hooks

这里主要参考了这篇文章，该文详细阐述了如何在React实现Hooks获取数据的基本步骤，简单说一下就是使用了useEffect这个Hooks自带的生命周期函数，当然这个函数和原来写在某个生命周期函数里面不同，这个是组件更新就会自动更新的，所以下面的写法会报错的：

import React, {
    useState, useEffect } from 'react';
import axios from 'axios';
function App() {
   
  const [data, setData] = useState({
    hits: [] });
  useEffect(async () => {
   
    const result = await axios(
      'https://hn.algolia.com/api/v1/search?query=redux',
    );
    setData(result.data);
  });
  return (
    <ul>
      {
   data.hits.map(item => (
        <li key={
   item