时间戳

首页 > 解决方案 > 根据其他钩子的结果反应钩子

reactjs - 根据其他钩子的结果反应钩子

问题描述

我有一个自定义钩子useWebApi，它可以调用 web api 并返回 api 结果。

function useWebApi(method, url) {
  const [fetching, setFetching] = useState(true);
  const [result, setResult] = useState(null);
  useEffect(() => {
    axios[method](url).then(res => {
      setFetching(false);
      setResult(res);
    })
  }, [url]);
  return [fetching, result];
}

我想做一些事情，比如 fetch url1，如果url1是 fetch ，那么 fetch url2。这两个api不是独立的，url2只能在url1抓取完成后调用。所以我编写如下代码

const url1 = '/login';
const url2 = '/getMyUserInfo';
function App() {
  const [fetching1, result1] = useWebApi('get', url1);
  if (result1) {
    const [fetching2, result2] = useWebApi('get', url2);
  }

  return (
    <div>
    {result1}
    {result2}
    </div>
  )
}

但是钩子不能在if语句内部调用，所以我将其更改为，

const url1 = '/login';
const url2 = '/getMyUserInfo';
function App() {
  const [fetching1, result1] = useWebApi('get', url1);
  useEffect(() => {
    if (result1) {
      const [fetching2, result2] = useWebApi('get', url2);
    }
  }, [result1])

  return (
    <div>
    {result1}
    {result2}
    </div>
  )
}

但是，仍然存在问题，我无法渲染result2，因为它在嵌套范围内，那么我该如何解决呢？

标签： reactjsreact-hooks

解决方案

您可以做的是公开一个doFetch方法等，以便手动调用钩子。

function useWebApi(method, url) {
  const [fetching, setFetching] = useState(true);
  const [result, setResult] = useState(null);

  const doFetch = useCallback((fetchUrl = url) => {
    axios[method](fetchUrl).then(res => {
      setFetching(false);
      setResult(res);
    })
  }, [method, url])

  useEffect(() => {
    if (url) {
      doFetch();
    }
  }, [doFetch]);

  return [fetching, result, doFetch];
}

function App() {
  const [fetching1, result1, doFetch1] = useWebApi('get', url1);
  const [fetching2, result2, doFetch2] = useWebApi('get');

  useEffect(() => {
    if (result1) {
      doFetch2(url2);
    }
  }, [result1])

  return (
    <div>
    {result1}
    {result2}
    </div>
  )
}

推荐阅读