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

前言

关于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