如何在React Hook组件中远程获取数据？

如何在React Hook组件中远程获取数据？

简介

在本教程中,我想给你看在React Hook组件中如何通过state和effect 等hooks获取数据。
我们将使用众所周知的Hacker News API获取从科技世界受欢迎的文章。 您还将实现您的自定义的数据抓取钩可以重用任何地方在您的应用程序或发布在npm作为独立节点包。

• 如果你对于关于这个新的特性还没有了解,请先查看React Hook简介.
• 如果你对React Hook足够了解,想查看完整例子请点击这里GitHub库 （这个项目展示了如何通过effectHook获取数据）。

如果你只是想有一个准备去钩反应数据获取:npm install use-data-api并遵循文档. 别忘了明星如果你使用它:-)

注意:在未来,React Hooks不被用于数据获取的反应。 相反,一个叫做Suspense的功能将负责。
以下介绍还是一个伟大的方式来了解更多关于state和effect hooks in React。

数据获取与钩子的反应

如果你不熟悉如何在React获取数据,可以阅读我的这篇文章《如何在react远程加载数据》.
通过数据获取与React class组件,它如何可以重用渲染支撑组件和高阶组件,以及如何处理错误处理和加载功能。

在下面代码中,我展示了在React Function 组件中使用React Hook。

    import React, { useState } from 'react';
    
    function App() {
      const [data, setData] = useState({ hits: [] });
    
      return (
        <ul>
          {data.hits.map(item => (
            <li key={item.objectID}>
              <a href={item.url}>{item.title}</a>
            </li>
          ))}
        </ul>
      );
    }

export default App;

App组件显示条目的列表(点击=黑客新闻文章)。data和setData来自于useState的state hook ，它负责管理组件的state和获取数据。 初始状态是一个对象，里面有一个名为hits的空数组,表示无数据。

我们将使用axios获取数据,但是取决于你使用另一个数据抓取库或浏览器的本地获取API。 如果你还没有安装axios,你可以通过在命令行上npm install axios. 然后通过effect hook实现数据获取:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({ hits: [] });

  useEffect(async () => {
    const result = await axios(
      'http://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用于获取数据的axios API和设置组件的数据在本地状态与政府挂钩的更新功能。 通过async/await.解决异步请求。