React Hooks Fetch API с зависимостью от данных

Question

Я создал пример React Custom Hook с именем 'useFetch', который принимает URL-адрес, инкапсулирующий API выборки.

Затем я могу вызвать настраиваемый хук для получения данных из конечной точки.

Проблема в том, как мне go использовать результат моей первой выборки для передачи во второй вызов ловушки выборки?

Внутри моей ловушки находится ожидающий вызов API выборки, но он не мешает основному компоненту вызывать второй обработчик выборки.

Пример:

function Home() {

  const result = useFetch("https://google.com/");
  const result2 = useFetch("https://yahoo.com/", result);

  return ( <
    >
    // Use results
    <
    />
  );
}

---

useFetch Hook - реализация отладки

export default function useFetch(url, data) {
      const [result, setResult] = useState(0);

      async function asyncFetch() {
        let res = await fetch(url);
        setResult(res.url);
      };

      useEffect(() => {
        asyncFetch();
      }, [])

      return res;
    }

---

useFetch был функцией javascript, которая была импортирована и использована, и мы могли бы определить ее как ожидаемую асин c функцию.

Однако Теперь, когда это зацепка, мы не можем ожидать выполнения useFetch на уровне Home ().

Answer 1

Для этого варианта использования вы можете выполнить второй вызов в useEffect и добавить свой результат в качестве зависимости. то есть, когда вы получите обновленный результат, useEffect будет выполняться.

useEffect(() => {
   useFetch(url2, result)
}, result)