如何使用 Hook 进行获取数据？

使用 Hook 进行数据获取，可以使用 useEffect 和 useState 这两个 Hook，其中 useEffect 用于在组件渲染完成后执行副作用操作，useState 用于定义组件内部状态。

具体步骤如下：

1、定义一个 state，用于存储获取到的数据。

const [data, setData] = useState(null);

2、使用 useEffect Hook，在组件渲染完成后发起数据获取请求，并将获取到的数据存储到 state 中。

useEffect(() => {
  const fetchData = async () => {
    const result = await axios.get('/api/data');
    setData(result.data);
  };
  fetchData();
}, []);

如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。

2、在组件中使用获取到的数据。

return (
  <div>
    {data && data.map(item => (
      <div key={item.id}>{item.title}</div>
    ))}
  </div>
);

这样，就可以通过使用 Hook 进行数据获取，并在组件中使用获取到的数据。

完整示例代码：

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;

支持传参和加载状态和错误处理：

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


function App() {
  const [data, setData] = useState({ hits: [] });
  const [query, setQuery] = useState('redux');
  const [url, setUrl] = useState(
    'https://hn.algolia.com/api/v1/search?query=redux',
  );
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);


  useEffect(() => {
    const fetchData = async () => {
      setIsError(false);
      setIsLoading(true);


      try {
        const result = await axios(url);


        setData(result.data);
      } catch (error) {
        setIsError(true);
      }


      setIsLoading(false);
    };


    fetchData();
  }, [url]);


  return (
    <Fragment>
      <input
        type="text"
        value={query}
        onChange={event => setQuery(event.target.value)}
      />
      <button
        type="button"
        onClick={() =>
          setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)
        }
      >
        Search
      </button>


      {isError && <div>Something went wrong ...</div>}


      {isLoading ? (
        <div>Loading ...</div>
      ) : (
        <ul>
          {data.hits.map(item => (
            <li key={item.objectID}>
              <a href={item.url}>{item.title}</a>
            </li>
          ))}
        </ul>
      )}
    </Fragment>
  );
}


export default App;

把所有 state 都放在同一个 useState 调用中，或是每一个字段都对应一个 useState 调用，这两方式都能跑通。当你在这两个极端之间找到平衡，然后把相关 state 组合到几个独立的 state 变量时，组件就会更加的可读。如果 state 的逻辑开始变得复杂，我们推荐用 reducer 来管理它，或使用自定义 Hook。