如何使用 React 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 的 hook 用于从 API 中获取从后端请求回来的数据，并使用 state hook 的更新函数在组件的本地状态中设置数据。prmomise 解析发生在异步/等待中。

但是，当你运行应用程序时，你会发现效果挂钩在组件装载时运行，但在组件更新时也会运行，这样它就会一次又一次地获取数据。这是一个错误，需要避免。我们只想在组件挂载时获取数据。这就是为什么你可以提供一个空数组作为 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(
      '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;

第二个参数可用于定义钩子所依赖的所有变量（在此数组中分配）。如果其中一个变量发生更改，则挂载将再次运行。如果包含变量的数组为空，则在更新组件时根本不会运行钩子，因为它不必监视任何变量。

还有最后一个问题。在代码中，我们使用 async/await 从第三方 API 获取数据。而我们知道 async 函数返回一个 AsyncFunction 对象。但是，effect hook 应不返回任何内容或清理函数。这就是为什么不允许直接在 effect hook 中使用异步的原因。让我们通过调用 effect 内的异步函数来实现它的解决方法：

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;

这就是使用 React 钩子获取数据。