如何在Prop变化时触发自定义Hook重新执行？

你编写的useHttp Hook在主页面调用时正常工作，但在子组件中传入随用户操作变化的selectedId生成动态URL时，Hook仅在初始渲染时执行一次，不会随着URL变化重新发起请求。

问题原因 #

问题出在useEffect的依赖数组上——你给的是空数组[]，这会让React认为这个effect没有任何依赖项，只会在组件首次挂载时执行一次，后续即使传入的url参数发生变化，也不会触发effect重新执行。

解决方案 #

不需要重写useEffect的逻辑，只需要把url添加到useEffect的依赖数组中即可：

修改后的useHttp代码：

import { useEffect, useState } from "react";

export function useHttp({ url }: { url: string }) {
  const [data, setData] = useState<any>(null);

 useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;
    fetch(url, { signal })
      .then((res) => res.json())
      .then((data) => setData(data))
      .catch((err) => {
        if (err.name === "AbortError") {
          console.log("successfully aborted");
        } else {
          // handle error
        }
      });

    return () => {
      controller.abort();
    };
  }, [url]); // 将url加入依赖数组

  return data ;
}

效果说明 #

把url加入依赖数组后，React会监听url的变化：每当子组件的selectedId更新导致url改变时，useEffect就会重新执行，发起对应ID的用户数据请求；同时，之前未完成的请求会被controller.abort()终止，避免无效的网络请求和状态更新冲突。

内容的提问来源于stack exchange，提问作者qwerty