在 useEffect 中调用 useFetch 钩子答案

【问题标题】：calling useFetch hook inside useEffect在 useEffect 中调用 useFetch 钩子
【发布时间】：2021-05-28 06:14:23
【问题描述】：

我发现了一个非常 interesting hook，我想在 useEffect 中使用这个钩子（它违反了规则）

const useFetch = (url, options) => {
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url, options);
        const json = await res.json();
        setResponse(json);
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, []);
  return { response, error };
};

function App() {
  const res = useFetch("example.com", {});

   useEffect(() => {
       // use the hook and make a secondary request 
   }, [])

为了支持这一点，我需要进行哪些修改？ AFAIK 钩子不能在 useEffect 中调用

可能是一个新的参数，将 setUrl 并再次运行它？

【问题讨论】：

是否有问题或问题隐藏在某个地方？你在问什么？ React 钩子不能在回调中调用，也不能有条件地调用。 Rules of Hooks.
第一个请求完成后是否需要进行第二次请求？还有条件在这里发挥作用
我编辑了问题以简化。因为我唯一需要做的就是在useEffect中使用那个钩子。不需要任何条件。
你可以在你的useEffect 中使用res 就好了，只要确保你将它添加为钩子的依赖项。
如果你只想制作。在初始渲染后获取请求，自定义钩子已经通过获取 useEffect 中的数据为您执行此操作，我认为您的用例是否有所不同，并且需要对您想要实现的目标进行更多说明

标签： javascript reactjs react-hooks

【解决方案1】：

您不能有条件地调用useFetch，也不能在任何回调（即useEffect 回调）中调用它（请参阅rules of hooks），但您可以利用钩子在同一时间调用的事实订购每个渲染。执行条件测试并设置传递给第二个 useFetch 挂钩的 URL。在发出请求之前更新 useFetch 挂钩以检查真实的 url。

const useFetch = (url, options) => {
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url, options);
        const json = await res.json();
        setResponse(json);
      } catch (error) {
        setError(error);
      }
    };
    url && fetchData();
  }, []);
  return { response, error };
};

...

function App() {
  const res = useFetch("example.com", {});

  let url = "";
  if (someCondition) {
    let url = ""example2.com"";
  }
  const res2 = useFetch("example.com", {});

【讨论】：

【解决方案2】：

当某些状态或变量发生变化时，您似乎想在钩子中执行获取请求。

您不能有条件地调用一个钩子，也不能根据文档中提到的rules of hooks 在另一个钩子中执行它。

要做你想做的事，你可以修改你的自定义钩子以接受一个数组作为你传递给其中的 useEffect 的依赖项，当任何依赖项发生变化时它会调用 api

const useFetch = (url, options, deps = []) => {
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url, options);
        const json = await res.json();
        setResponse(json);
      } catch (error) {
        setError(error);
      }
    };
    url && fetchData();
  }, deps);
  return { response, error };
};

并像使用它

function App() {
  const res = useFetch("example.com", {}, [someVariable]);

  ...
}

【讨论】：