React调用多函数更新state时allImageData的photo字段不持久化问题

你遇到的状态覆盖问题来自React闭包陷阱：convertImageToBlob函数在定义时捕获了当前渲染周期的allImageData旧值，当你在handleImage中先通过函数式更新修改了photo字段后，异步触发的convertImageToBlob内部的setAllImageData依然使用闭包捕获的旧状态（旧状态中photo为空对象），直接展开旧状态赋值就会覆盖掉已经更新的photo字段。

将convertImageToBlob内部的setAllImageData改为函数式更新，始终基于最新的前序状态修改，即可避免覆盖之前的状态更新：

const convertImageToBlob = (file) => {
    var reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onloadend = function (e) {
        // 改为函数式更新，拿到实时最新的prevState
        setAllImageData(prevState => ({
            ...prevState,
            error: "",
            compressImage: file,
            blobImage: reader.result,
        }));
    };
};

• 所有修改allImageData的逻辑统一使用函数式更新，包括handleImage的else分支，彻底避免闭包导致的状态异常：

else {
    setAllImageData(prevState => ({
        ...prevState,
        photo: "",
        error: "请上传合法的图片类型（jpeg/png）",
    }));
}

• 移除无效赋值：reader.readAsDataURL没有返回值，原有代码中var url = reader.readAsDataURL(file);的赋值无意义，可以直接删除。
• 补充异常捕获：为FileReader添加onerror事件处理，避免文件读取失败时无错误提示。
• 添加异步清理逻辑：组件卸载时终止未完成的文件读取、压缩异步任务，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Harkirat Singh Virdi