版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
前言
关于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的官网也提供了简单的例子,大家可以自己去看。