在React-query的onSuccess事件中更新React状态引发内存泄漏的解决方法

这个内存泄漏和状态更新异常的问题，核心在于闭包捕获了旧的images状态值，同时组件卸载后仍可能执行setImages触发无效状态更新。下面是分步解决方案：

1. 最直接的修复：使用函数式更新State #

setState支持传入函数形式的参数，它会自动接收当前最新的状态值作为入参，完美避开闭包带来的旧值捕获问题，同时也能减少无效更新的风险。

修改useImageUpload.js中的onSuccess回调：

onSuccess: ({ data }) => {
  console.log("Image uploaded successfully");
  // 用函数式更新，基于最新的状态值追加新URL
  setImages(prevImages => [...prevImages, data.secure_url]);
},

这样每次更新都会基于当前最新的图片数组，不会再出现只保留最后一张上传图片的问题，同时避免了闭包导致的状态滞后。

2. 彻底解决内存泄漏：添加Mutation清理逻辑 #

为了防止组件在上传过程中被卸载后，onSuccess仍执行setImages引发内存泄漏，我们可以利用React Query提供的cancel方法，在组件卸载时终止正在进行的mutation。

更新useImageUpload.js：

import axios from "axios";
import { useState, useEffect } from "react";
import { useMutation } from "react-query";

const useImageUpload = () => {
  const [images, setImages] = useState([]);

  // 解构出cancel方法用于终止mutation
  const { isLoading: uploading, mutateAsync: uploadImage, cancel } = useMutation(
    async (data) => {
      let formData = new FormData();
      formData.append("file", data);
      formData.append("upload_preset", "uploadPresetHere");
      formData.append("cloud_name", "nameHere");

      return await axios.post(
        "cloudinary_url",
        formData,
        { withCredentials: false }
      );
    },
    {
      onSuccess: ({ data }) => {
        console.log("Image uploaded successfully");
        setImages(prevImages => [...prevImages, data.secure_url]);
      },
      onError: (error) => {
        console.log(error.response);
      },
    }
  );

  // 组件卸载时取消正在进行的mutation
  useEffect(() => {
    return () => {
      cancel();
    };
  }, [cancel]);

  return { images, uploadImage, uploading };
};

export default useImageUpload;

组件卸载时，cancel()会终止未完成的上传请求，onSuccess回调也就不会再执行，彻底避免了无效状态更新引发的内存泄漏。

3. 进阶方案：用React Query缓存管理图片列表（更符合设计理念） #

既然已经在使用React Query，我们可以把图片列表的状态完全交给React Query的缓存系统管理，彻底摆脱本地state的闭包问题，还能利用缓存同步、持久化等特性。

修改后的useImageUpload.js示例：

import axios from "axios";
import { useMutation, useQueryClient, useQuery } from "react-query";

const useImageUpload = () => {
  const queryClient = useQueryClient();

  // 用useMutation处理上传，成功后更新缓存
  const { isLoading: uploading, mutateAsync: uploadImage } = useMutation(
    async (data) => {
      let formData = new FormData();
      formData.append("file", data);
      formData.append("upload_preset", "uploadPresetHere");
      formData.append("cloud_name", "nameHere");

      return await axios.post(
        "cloudinary_url",
        formData,
        { withCredentials: false }
      );
    },
    {
      onSuccess: ({ data }) => {
        console.log("Image uploaded successfully");
        // 更新React Query缓存中的图片列表
        queryClient.setQueryData(['productImages'], (oldImages) => {
          return oldImages ? [...oldImages, data.secure_url] : [data.secure_url];
        });
      },
      onError: (error) => {
        console.log(error.response);
      },
    }
  );

  // 从缓存中获取图片列表（如果需要从后端拉取已有图片，可在useQuery中写请求逻辑）
  const { data: images = [] } = useQuery(['productImages'], () => {
    return Promise.resolve([]);
  });

  return { images, uploadImage, uploading };
};

export default useImageUpload;

这种方式完全遵循React Query的设计思路，将状态管理交给专业的缓存工具，减少本地state的使用，从根源上避免闭包和内存泄漏问题。

内容的提问来源于stack exchange，提问作者Keshav Kishor Ram