React自定义Hook重置state问题：解决downloadUrls重置引发的无限循环

核心问题分析 #

调用reset()引发无限循环的原因很直接：reset()会把downloadUrls设为空数组，这个状态变化会触发AddSlides组件中依赖downloadUrls的useEffect，而useEffect里又会再次调用reset()，形成闭环。另外你直接用[...allUrls, ...downloadUrls]更新allUrls时，因为useEffect依赖里没加allUrls，会捕获到旧的状态值，导致更新不完整。

修复后的AddSlides组件代码 #

export default function AddSlides() {
  const [filesToUpload, setFilesToUpload] = useState([]);
  const { downloadUrls, reset } = useUpload(filesToUpload, "AddSlides");
  const [allUrls, setAllUrls] = useState([]);

  useEffect(() => {
    // 只有当downloadUrls有内容时才处理，空数组直接跳过
    if (downloadUrls.length === 0) return;

    // 用函数式更新获取最新的allUrls状态，避免闭包捕获旧值
    setAllUrls(prevAllUrls => [...prevAllUrls, ...downloadUrls]);
    setFilesToUpload([]);
    reset(); // 现在只会在downloadUrls有内容时执行，不会触发循环
  }, [downloadUrls, reset]);

  return (<>//some code</>)
}

额外优化（可选） #

在useUpload Hook里，可以优化上传逻辑的触发条件，避免空文件数组触发无效操作：

export default function useUpload(files, componentName = "") {
  const [downloadUrls, setDownloadUrls] = useState([]);

  const reset = () => {
    console.log("Setting download urls to empty");
    setDownloadUrls([]);
  };

  useEffect(() => {
    // 空文件数组直接返回，不执行上传逻辑
    if (files.length === 0) return;

    // 你的上传逻辑代码
    // 示例：上传完成后设置downloadUrls
    // const urls = await uploadFiles(files);
    // setDownloadUrls(urls);
  }, [files, componentName]);

  return {
    downloadUrls,
    reset,
  };
}

为什么这样能解决问题 #

1. 打破无限循环：通过if (downloadUrls.length === 0) return的判断，只有当downloadUrls有实际内容时才执行reset()。重置后downloadUrls变成空数组，下一次useEffect触发时会直接返回，不会再次调用reset()，彻底打破循环。
2. 保证状态更新准确：使用setAllUrls(prevAllUrls => ...)的函数式更新，确保每次都能拿到最新的allUrls状态，避免因为闭包捕获旧值导致的更新错误。

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