React中图片转base64后JSON.stringify序列化时编码内容丢失

实现图片转base64编码并发送至后端的功能时，执行JSON.stringify()序列化包含编码结果的对象前，base64内容读取正常；序列化后实际编码字符串丢失，输出结果仅保留encoding字段。
复现的核心表现：

• useEffect钩子中打印baseImageCorrect变量，可正常输出完整的图片base64长字符串
• 序列化后的输出仅为{"fileBase64":{"encoding":"base64"}}，无实际编码内容

const [baseImage, setBaseImage] = useState('');
const [baseImageCorrect, setBaseImageCorrect] = useState('');

const convertBase64 = (file) => {
    return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file);

        fileReader.onload = () => {
            resolve(fileReader.result);
        };

        fileReader.onerror = (error) => {
            reject(error);
            console.log(error);
        };
    });
};

const uploadImage = async (e) => {
    const file = e.target.files[0];
    const base64 = await convertBase64(file);
    const base64RemovedType = base64.split(',')[1];
    setBaseImage(`${base64RemovedType}`);
};

useEffect(() => {
    setBaseImageCorrect(baseImage);
    console.log('current:' + baseImageCorrect);
    // 此处可打印出正确的完整编码字符串
}, [baseImage, baseImageCorrect]);


const EncodedImage = JSON.stringify({
    fileBase64: (baseImageCorrect, { encoding: 'base64' }),
});

console.log(EncodedImage)
// 输出结果为 "{"fileBase64":{"encoding":"base64"}}" ，丢失实际编码内容

1. 核心语法错误：误用逗号操作符
   fileBase64: (baseImageCorrect, { encoding: 'base64' }) 这段代码中，圆括号包裹的内容是JS的逗号操作符，逗号操作符会从左到右依次执行每个表达式，最终返回最后一个表达式的结果。也就是说这里赋值给fileBase64的根本不是包含编码内容的对象，而是最后面的{ encoding: 'base64' }，前面的baseImageCorrect直接被丢弃了，序列化后自然没有编码字符串。
2. 执行时机错误：拿不到最新state
   把JSON.stringify的逻辑写在了组件渲染的顶层，React的state更新是异步的，组件初次渲染时baseImageCorrect还是初始空值，就算修正了语法，顶层执行序列化时也拿不到上传后更新的编码内容，只有在state更新完成后的时机执行序列化，才能拿到正确的值。

• 修正对象赋值语法，不要使用逗号操作符，把编码内容和编码格式作为同一个对象的属性传入
• 将序列化逻辑移动到能获取最新state的位置，比如useEffect依赖更新后、或者向后端发请求的提交函数中，避免拿到初始空值
• 移除冗余的baseImageCorrect状态，不需要额外做一层state中转赋值

修复后的核心代码参考：

const [baseImage, setBaseImage] = useState('');

const convertBase64 = (file) => {
    return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = () => resolve(fileReader.result);
        fileReader.onerror = (error) => {
            console.log(error);
            reject(error);
        };
    });
};

const uploadImage = async (e) => {
    const file = e.target.files[0];
    const base64 = await convertBase64(file);
    const base64RemovedType = base64.split(',')[1];
    setBaseImage(base64RemovedType);
};

// 等baseImage更新完成后再执行序列化
useEffect(() => {
    if (!baseImage) return;
    // 正确构造对象，不要用逗号操作符
    const EncodedImage = JSON.stringify({
        fileBase64: {
            content: baseImage,
            encoding: 'base64'
        }
    });
    console.log(EncodedImage);
    // 此处拿到正确结果后再调用后端接口即可
}, [baseImage]);

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