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.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}
export default App;

原因很简单，因为useEffect在组件状态更新的时候就会执行，而获取数据肯定伴随着组件更新，就这样恶性循环是肯定不可以的，熟悉的同学肯定知道下面这种解决方法，传个空数组：

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.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}
export default App;

但是这样做的话也是会有警告的，简单地说就是React不想让我们在useEffect中使用异步方法，它给我们提供了这样的写法：

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

Next.js

然而上面的解决方法对Next.js是没用的。
官网上说明Next.js获取数据的方式是这样的：

import fetch from 'isomorphic-unfetch'

function Page({ stars }) {
  return <div>Next stars: {stars}</div>
}

Page.getInitialProps = async ({ req }) => {
  const res = await fetch('https://api.github.com/repos/zeit/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default Page

其实这个方法是一目了然的，对于我们的数据接口最简单的写法即：

Home.getInitialProps = async() => {
  const res = await axios.get('https://hn.algolia.com/api/v1/search?query=redux')
  return { data: res.data }
}

关于React类方法的写法这里就不谈了，Next的官网也提供了简单的例子，大家可以自己去看。