React Hooks에서 데이터를 요청하는 방법(자세한 설명)

이 글은 React Hooks에서 데이터를 요청하는 방법에 대한 내용입니다(자세한 설명). 도움이 필요한 친구들이 참고하시면 좋겠습니다.

이 튜토리얼을 통해 React에서 상태 및 효과 Hook을 사용하여 데이터를 요청하는 방법을 알려드리고 싶습니다. 우리는 잘 알려진 Hacker News API를 사용하여 인기 있는 기사를 얻을 것입니다. 모든 애플리케이션에서 재사용하거나 npm에 게시할 수 있는 자체 데이터 요청 후크를 정의합니다.

React의 새로운 기능을 모르신다면 제가 작성한 React Hooks 소개 글을 확인해 보세요. 기사의 예시를 직접 보고 싶다면 이 Github 저장소를 직접 확인하시면 됩니다.

참고: 향후 버전의 React에서는 Hooks가 더 이상 데이터를 얻는 데 사용되지 않고 Suspense라는 것으로 대체될 것입니다. 그럼에도 불구하고 다음 방법은 여전히 ​​상태 및 효과 Hook에 대해 배울 수 있는 좋은 방법입니다.

데이터 요청에 React Hooks 사용

React에서 데이터 요청에 대한 경험이 없다면 내 기사인 React에서 데이터를 가져오는 방법을 읽어보세요. 이 문서에서는 클래스 구성 요소를 사용하여 데이터를 얻는 방법, 재사용 가능한 렌더 소품 구성 요소 및 고차 구성 요소를 사용하는 방법, 오류 및 로드 상태를 처리하는 방법을 설명합니다. 이 글에서는 Function 컴포넌트와 React Hooks를 사용하여 이를 재현하고 싶습니다.

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;

앱 구성 요소는 Hacker News 기사의 정보 목록을 표시합니다. 상태 및 상태 업데이트 기능은 요청을 통해 얻은 앱 구성 요소의 로컬 상태를 관리하는 useState라는 상태 후크를 통해 생성됩니다. 초기 상태는 빈 배열이며 현재는 새 상태를 설정할 수 있는 장소가 없습니다.

우리는 axios를 사용하여 데이터를 가져올 것입니다. 물론 익숙한 요청 라이브러리나 브라우저와 함께 제공되는 가져오기 API를 사용할 수도 있습니다. 아직 axios를 설치하지 않았다면 npm install axios를 통해 설치할 수 있습니다.

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에서 데이터를 얻고 상태 후크의 업데이트 기능을 사용하여 데이터를 로컬 상태에 저장합니다. 그리고 Promise를 해결하려면 async/await를 사용하세요.

그러나 위의 코드를 실행하면 빌어먹을 무한 루프에 빠지게 됩니다. 효과 후크는 구성 요소가 마운트되고 업데이트될 때 실행됩니다. 데이터를 얻을 때마다 상태를 업데이트하므로 구성 요소가 효과를 업데이트하고 다시 실행하여 데이터를 계속해서 요청하게 됩니다. 분명히 우리는 그러한 버그를 피해야 하며, 컴포넌트가 마운트될 때만 데이터를 요청하기를 원합니다. 효과 후크에서 제공하는 두 번째 매개 변수에 빈 배열을 전달할 수 있습니다. 이렇게 하면 구성 요소가 업데이트될 때 효과 후크가 실행되지 않지만 구성 요소는 마운트될 때 계속 실행됩니다.

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;

두 번째 매개변수는 후크가 의존하는 변수를 정의하는 데 사용됩니다. 변수 중 하나가 변경되면 후크가 자동으로 실행됩니다. 두 번째 매개변수가 빈 배열인 경우 후크는 변수를 모니터링하지 않으므로 구성요소 업데이트 시 실행되지 않습니다.

코드에는 async/await를 사용하여 타사 API에서 제공하는 데이터를 가져오는 또 다른 점이 있습니다. 문서에 따르면 모든 비동기 함수는 암시적 약속을 반환합니다.

"비동기 함수 선언은 AsyncFunction 개체를 반환하는 비동기 함수를 정의합니다. 비동기 함수는 이벤트를 통해 비동기적으로 작동하는 함수입니다. 결과를 반환하기 위해 암시적 Promise를 사용하는 루프입니다. "

" 비동기 함수는 비동기 함수 객체를 반환하는 비동기 함수를 정의합니다. 공식 Promise는 다음을 반환합니다. 최종 결과입니다."

그러나 효과 후크는 아무것도 반환하지 않거나 정리 기능을 반환해야 합니다. 이것이 콘솔에 오류 메시지가 표시되는 이유입니다.

index.js:1452 Warning: useEffect function must return a cleanup function or nothing. 
Promises and useEffect(async () => …) are not supported, but you can call an async function inside an effect.

이는 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(
        'http://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 Hooks를 사용하는 작은 사례입니다. 그러나 오류 처리, 로드 상태, 양식 데이터 수집을 트리거하는 방법 및 이슈 처리 후크를 재사용하는 방법에 관심이 있다면 계속 읽어보겠습니다.

후크를 수동 또는 자동으로 트리거하는 방법은 무엇입니까?

이제 컴포넌트가 마운트된 후 데이터를 얻을 수 있지만 입력 상자를 사용하여 API에 관심 있는 주제를 선택하도록 동적으로 지시하는 방법은 무엇입니까? 이전 코드에서 볼 수 있듯이 기본적으로 "Redux"를 쿼리 매개변수로 사용하지만('http://hn.algolia.com/api/v1/...'), React를 어떻게 쿼리합니까? 관련 주제? "Redux" 외에 다른 주제를 가져오기 위한 입력 입력 상자를 구현해 보겠습니다. 이제 입력 상자에 새로운 상태를 도입해 보겠습니다.

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

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

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'http://hn.algolia.com/api/v1/search?query=redux',
      );

      setData(result.data);
    };

    fetchData();
  }, []);

  return (
    <Fragment>
      <input
        type="text"
        value={query}
        onChange={event => setQuery(event.target.value)}
      />
      <ul>
        {data.hits.map(item => (
          <li key={item.objectID}>
            <a href={item.url}>{item.title}</a>
          </li>
        ))}
      </ul>
    </Fragment>
  );
}

export default App;

现在，请求数据和查询参数两个 state 相互独立，但是我们需要像一个办法希望他们耦合起来，只获取输入框输入的参数指定的话题文章。通过以下修改，组件应该在 mount 之后按照查询获取相应文章。

...

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

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `http://hn.algolia.com/api/v1/search?query=${query}`,
      );

      setData(result.data);
    };

    fetchData();
  }, []);

  return (
    ...
  );
}

export default App;

实际上，我们还缺少部分代码。你会发现当你在输入框输入内容后，并没有获取到新的数据。这是因为 useEffect 的第二个参数只是一个空数组，此时的 effect 不依赖于任何的变量，所以这只会在 mount 只会触发一次。但是，现在我们需要依赖查询条件，一旦查询发送改变，数据请求就应该再次触发。

...

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

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `http://hn.algolia.com/api/v1/search?query=${query}`,
      );

      setData(result.data);
    };

    fetchData();
  }, [query]);

  return (
    ...
  );
}

export default App;

好了，现在一旦你改变输入框内容，数据就会重新获取。但是现在又要另外一个问题：每次输入一个新字符，就会触发 effect 进行一次新的请求。那么我们提供一个按钮来手动触发数据请求呢？

function App() {
  const [data, setData] = useState({ hits: [] });
  const [query, setQuery] = useState('redux');
  const [search, setSearch] = useState('redux');

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `http://hn.algolia.com/api/v1/search?query=${search}`,
      );

      setData(result.data);
    };

    fetchData();
  }, [search]);

  return (
    <Fragment>
      <input
        type="text"
        value={query}
        onChange={event => setQuery(event.target.value)}
      />
      <button type="button" onClick={() => setSearch(query)}>
        Search
      </button>
      <ul>
        {data.hits.map(item => (
          <li key={item.objectID}>
            <a href={item.url}>{item.title}</a>
          </li>
        ))}
      </ul>
    </Fragment>
  );
}

此外，search state 的初始状态也是设置成了与 query state 相同的状态，因为组件在 mount 的时候会请求一次数据，此时的结果也应该是反应的是输入框中的搜索条件。然而， search state 和 query state 具有类似的值，这看起来比较困惑。为什么不将真实的 URL 设置到 search state 中呢？

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

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(url);

      setData(result.data);
    };

    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>

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

这就是通过 effect hook 获取数据的案例，你可以决定 effect 取决于哪个 state。在这个案例中，如果 URL 的 state 发生改变，则再次

运行该 effect 通过 API 重新获取主题文章。

Loading 态 与 React Hooks

让我们在数据的加载过程中引入一个 Loading 状态。它只是另一个由 state hook 管理的状态。Loading state 用于在 App 组件中呈现 Loading 状态。

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(
    'http://hn.algolia.com/api/v1/search?query=redux',
  );
  const [isLoading, setIsLoading] = useState(false);

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

      const result = await axios(url);

      setData(result.data);
      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>

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

export default App;

现在当组件处于 mount 状态或者 URL state 被修改时，调用 effect 获取数据，Loading 状态就会变成 true。一旦请求完成，Loading 状态就会再次被设置为 false。

错误处理与 React Hooks

通过 React Hooks 进行数据请求时，如何进行错误处理呢？ 错误只是另一个使用 state hook 初始化的另一种状态。一旦出现错误状态，App 组件就可以反馈给用户。当使用  async/await 函数时，通常使用 try/catch 来进行错误捕获，你可以在 effect 中进行下面操作：

...

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>
    ...
    {isError && <p>Something went wrong ...</p>}
    ...
  <Fragment>
);

effect 每次运行都会重置 error state 的状态，这很有用，因为每次请求失败后，用户可能重新尝试，这样就能够重置错误。为了观察代

码是否生效，你可以填写一个无用的 URL ，然后检查错误信息是否会出现。

使用表单进行数据获取

什么才是获取数据的正确形式呢？现在我们只有输入框和按钮进行组合，一旦引入更多的 input 元素，你可能想要使用表单来进行包装。此外表单还能够触发键盘的 “Enter” 事件。

function App() {
  ...
  const doFetch = (evt) => {
    evt.preventDefault();
    setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`);
  }
  return (
    <Fragment>
      <form
        onSubmit={ doFetch }
      >
        <input
          type="text"
          value={query}
          onChange={event => setQuery(event.target.value)}
        />
        <button type="submit">Search</button>
      </form>

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

      ...
    </Fragment>
  );
}

自定义 hook 获取数据

我们可以定义一个自定义的 hook，提取出所有与数据请求相关的东西，除了输入框的 query state，除此之外还有 Loading 状态、错误处理。还要确保返回组件中需要用到的变量。

const useHackerNewsApi = () => {
  const [data, setData] = useState({ hits: [] });
  const [url, setUrl] = useState(
    'http://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]);

  const doFetch = () => {
    setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`);
  };

  return { data, isLoading, isError, doFetch };
}

现在，我们在 App 组件中使用我们的新 hook 。

function App() {
  const [query, setQuery] = useState('redux');
  const { data, isLoading, isError, doFetch } = useHackerNewsApi();

  return (
    <Fragment>
      ...
    </Fragment>
  );
}

接下来，在外部传递 URL 给 DoFetch 方法。

const useHackerNewsApi = () => {
  ...

  useEffect(
    ...
  );

  const doFetch = url => {
    setUrl(url);
  };

  return { data, isLoading, isError, doFetch };
};

function App() {
  const [query, setQuery] = useState('redux');
  const { data, isLoading, isError, doFetch } = useHackerNewsApi();

  return (
    <Fragment>
      <form
        onSubmit={event => {
          doFetch(
            `http://hn.algolia.com/api/v1/search?query=${query}`,
          );

          event.preventDefault();
        }}
      >
        <input
          type="text"
          value={query}
          onChange={event => setQuery(event.target.value)}
        />
        <button type="submit">Search</button>
      </form>

      ...
    </Fragment>
  );
}

初始的 state 也是通用的，可以通过参数简单的传递到自定义的 hook 中：

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

const useDataApi = (initialUrl, initialData) => {
  const [data, setData] = useState(initialData);
  const [url, setUrl] = useState(initialUrl);
  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]);

  const doFetch = url => {
    setUrl(url);
  };

  return { data, isLoading, isError, doFetch };
};

function App() {
  const [query, setQuery] = useState('redux');
  const { data, isLoading, isError, doFetch } = useDataApi(
    'http://hn.algolia.com/api/v1/search?query=redux',
    { hits: [] },
  );

  return (
    <Fragment>
      <form
        onSubmit={event => {
          doFetch(
            `http://hn.algolia.com/api/v1/search?query=${query}`,
          );

          event.preventDefault();
        }}
      >
        <input
          type="text"
          value={query}
          onChange={event => setQuery(event.target.value)}
        />
        <button type="submit">Search</button>
      </form>

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

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

export default App;

这就是使用自定义 hook 获取数据的方法，hook 本身对API一无所知，它从外部获取参数，只管理必要的 state ，如数据、 Loading 和

错误相关的 state ，并且执行请求并将数据通过 hook 返回给组件。

用于数据获取的 Reducer Hook

目前为止，我们已经使用 state hooks 来管理了我们获取到的数据数据、Loading 状态、错误状态。然而，所有的状态都有属于自己的 state hook，但是他们又都连接在一起，关心的是同样的事情。如你所见，所有的它们都在数据获取函数中被使用。它们一个接一个的被调用（比如：setIsError、setIsLoading），这才是将它们连接在一起的正确用法。让我们用一个 Reducer Hook 将这三者连接在一起。

Reducer Hook 返回一个 state 对象和一个函数（用来改变 state 对象）。这个函数被称为分发函数（dispatch function），它分发一个 action，action 具有 type 和 payload 两个属性。所有的这些信息都在 reducer 函数中被接收，根据之前的状态提取一个新的状态。让我们看看在代码中是如何工作的：

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

const dataFetchReducer = (state, action) => {
  ...
};

const useDataApi = (initialUrl, initialData) => {
  const [url, setUrl] = useState(initialUrl);

  const [state, dispatch] = useReducer(dataFetchReducer, {
    isLoading: false,
    isError: false,
    data: initialData,
  });

  ...
};

Reducer Hook 以 reducer 函数和一个初始状态对象作为参数。在我们的案例中，加载的数据、Loading 状态、错误状态都是作为初始状态参数，且不会发生改变，但是他们被聚合到一个状态对象中，由 reducer hook 管理，而不是单个 state hooks。

const dataFetchReducer = (state, action) => {
  ...
};

const useDataApi = (initialUrl, initialData) => {
  const [url, setUrl] = useState(initialUrl);

  const [state, dispatch] = useReducer(dataFetchReducer, {
    isLoading: false,
    isError: false,
    data: initialData,
  });

  useEffect(() => {
    const fetchData = async () => {
      dispatch({ type: 'FETCH_INIT' });

      try {
        const result = await axios(url);

        dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
      } catch (error) {
        dispatch({ type: 'FETCH_FAILURE' });
      }
    };

    fetchData();
  }, [url]);

  ...
};

现在，在获取数据时，可以使用 dispatch 函数向 reducer 函数发送信息。使用 dispatch 函数发送的对象具有一个必填的 type 属性和一个可选的 payload 属性。type 属性告诉 reducer 函数需要转换的 state 是哪个，还可以从 payload 中提取新的 state。在这里只有三个状态转换：初始化数据过程，通知数据请求成功的结果，以及通知数据请求失败的结果。

在自定义 hook 的末尾，state 像以前一样返回，但是因为我们所有的 state 都在一个对象中，而不再是独立的 state ，所以 state 对象进行解构返回。这样，调用 useDataApi 自定义 hook 的人仍然可以 data  、isLoading和isError:

const useDataApi = (initialUrl, initialData) => {
  const [url, setUrl] = useState(initialUrl);

  const [state, dispatch] = useReducer(dataFetchReducer, {
    isLoading: false,
    isError: false,
    data: initialData,
  });

  ...

  const doFetch = url => {
    setUrl(url);
  };

  return { ...state, doFetch };
};

最后我们还缺少 reducer 函数的实现。它需要处理三个不同的状态转换，分被称为 FEATCH_INIT、FEATCH_SUCCESS、FEATCH_FAILURE。每个状态转换都需要返回一个新的状态。让我们看看使用 switch case 如何实现这个逻辑：

const dataFetchReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_INIT':
      return { ...state };
    case 'FETCH_SUCCESS':
      return { ...state };
    case 'FETCH_FAILURE':
      return { ...state };
    default:
      throw new Error();
  }
};

reducer 函数可以通过其参数访问当前状态和 dispatch 传入的 action。到目前为止，在 switch case 语句中，每个状态转换只返回前一个状态，析构语句用于保持 state 对象不可变(即状态永远不会被直接更改)。现在让我们重写一些当前 state 返回的属性，以便在每次转换时更改 一些 state:

const dataFetchReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_INIT':
      return {
        ...state,
        isLoading: true,
        isError: false
      };
    case 'FETCH_SUCCESS':
      return {
        ...state,
        isLoading: false,
        isError: false,
        data: action.payload,
      };
    case 'FETCH_FAILURE':
      return {
        ...state,
        isLoading: false,
        isError: true,
      };
    default:
      throw new Error();
  }
};

现在，每个状态转换（action.type决定）都返回一个基于先前 state 和可选 payload 的新状态。例如，在请求成功的情况下，payload 用于设置新 state 对象的 data 属性。

总之，reducer hook 确保使用自己的逻辑封装状态管理的这一部分。通过提供 action type 和可选 payload ，总是会得到可预测的状态更改。此外，永远不会遇到无效状态。例如，以前可能会意外地将 isLoading 和 isError 设置为true。在这种情况下，UI中应该显示什么？ 现在，由 reducer 函数定义的每个 state 转换都指向一个有效的 state 对象。

在 Effect Hook 中中断数据请求

在React中，即使组件已经卸载，组件 state 仍然会被被赋值，这是一个常见的问题。我在之前的文章中写过这个问题，它描述了如何防止在各种场景中为未挂载组件设置状态。让我们看看在自定义 hook 中，请求数据时如何防止设置状态：

const useDataApi = (initialUrl, initialData) => {
  const [url, setUrl] = useState(initialUrl);

  const [state, dispatch] = useReducer(dataFetchReducer, {
    isLoading: false,
    isError: false,
    data: initialData,
  });

  useEffect(() => {
    let didCancel = false;

    const fetchData = async () => {
      dispatch({ type: 'FETCH_INIT' });

      try {
        const result = await axios(url);

        if (!didCancel) {
          dispatch({ type: 'FETCH_SUCCESS', payload: result.data });
        }
      } catch (error) {
        if (!didCancel) {
          dispatch({ type: 'FETCH_FAILURE' });
        }
      }
    };

    fetchData();

    return () => {
      didCancel = true;
    };
  }, [url]);

  const doFetch = url => {
    setUrl(url);
  };

  return { ...state, doFetch };
};

每个Effect Hook都带有一个clean up函数，它在组件卸载时运行。clean up 函数是 hook 返回的一个函数。在该案例中，我们使用 didCancel 变量来让 fetchData 知道组件的状态(挂载/卸载)。如果组件确实被卸载了，则应该将标志设置为 true，从而防止在最终异步解析数据获取之后设置组件状态。

注意：实际上并没有中止数据获取（不过可以通过Axios取消来实现），但是不再为卸载的组件执行状态转换。由于 Axios 取消在我看来并不是最好的API，所以这个防止设置状态的布尔标志也可以完成这项工作。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目！

위 내용은 React Hooks에서 데이터를 요청하는 방법(자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!