React事件回调无法获取更新后的resizableList状态问题

问题概况 #

• 当TextInput组件的onChange通过eventBus.dispatch('addtext')调用reDraw函数时，resizableList状态显示为空数组
• 但在addImageClick等组件内直接绑定的事件函数中，能正常获取resizableList的实际内容
• 具体场景：添加图片后生成2个TextInput和Resizable组件，修改文本框内容时reDraw内打印的resizableList为空；点击添加图片按钮时，重置前打印的数组包含2个元素
• 临时 workaround：通过隐藏按钮触发addTextClick可获取正确状态，但并非根本解决办法

根本原因 #

这是闭包捕获旧状态导致的问题：

1. 组件挂载时，useEffect因依赖项为空数组仅执行一次，此时绑定的reDraw函数捕获的是组件初始状态的resizableList（空数组）
2. 后续resizableList状态更新后，旧的reDraw函数并未被重新绑定到eventBus，触发事件时始终调用的是捕获了初始空状态的旧函数
3. 而addImageClick这类通过组件onClick绑定的函数，会在每次组件渲染时重新绑定，因此能获取到最新的状态

解决方案 #

方案1：修复useEffect依赖并处理事件绑定/解绑 #

确保reDraw函数在状态变化时能重新绑定，同时清理旧事件避免内存泄漏：

• 给useEffect添加resizableList和image作为依赖项，状态更新时重新绑定事件
• 添加清理函数，在组件卸载或依赖变化时解绑旧事件
• 修正image状态的更新方式，避免直接修改状态对象

方案2：使用useRef保存最新状态 #

通过useRef实时同步最新的resizableList状态，让reDraw能直接访问到最新值，无需重新绑定事件

完整修正代码（方案1） #

import React, { useState, useRef, useEffect } from "react";
import Resizable from "./Resizable";
import TextInput from "./TextInput";
import eventBus from "../eventbus/EventBus";

export default function Meme(){
    const [image, setImage] = useState(null);
    const [resizableList, setResizableList] = useState([]);
    const hiddenFileInput = useRef(null);
    const cvs = useRef(null);

    function reDraw(){
        if (!image) return;
        const width = 600*(image.width/image.height);
        const ctx = cvs.current.getContext("2d");
        ctx.clearRect(0, 0, 1200, 600);
        ctx.drawImage(image,(1200-(width))/2,0,width,600);

        console.log(resizableList);

        for (let i=0;i<resizableList.length;i++){
            let el = document.getElementById(`${i}--textbox`);
            console.log('test');
        }

        console.log('ran');
        console.log(image);
    }

    function addResizable(width){
        if (!image) return;
        let resizable = {
            cvs:cvs,
            imgwidth:width,
            image:image
        }
        setResizableList((prevResizableList)=>[...prevResizableList, resizable]);
    }

    function draw() {
        if (!image) return;
        const width = 600*(image.width/image.height);
        const ctx = cvs.current.getContext("2d");
        console.log(image.width);
        ctx.clearRect(0, 0, 1200, 600);
        ctx.drawImage(image,(1200-(width))/2,0,width,600);
        addResizable(width);
        addResizable(width);
    };

    function addImageClick(e){
        e.preventDefault();
        console.log(resizableList);
        setResizableList([]);
        hiddenFileInput.current.click();
    };

    function addTextClick(e){
        e.preventDefault();
        console.log(resizableList);
    }

    useEffect(()=>{
        // 绑定事件
        eventBus.on('addtext', reDraw);
        // 清理旧事件
        return () => {
            eventBus.off('addtext', reDraw);
        };
    }, [resizableList, image]); // 添加依赖，状态变化时重新绑定

    useEffect(()=>{
        if (!image) return;
        // 每次image更新时绑定onload
        image.onload = draw;
    }, [image]);

    return (
        <main>
            <form className="form">
                <div className='form--textboxes'>
                    {resizableList.map((item,index)=>{
                        return (<TextInput cvs={item.cvs} image={item.image} imgwidth={item.imgwidth} key={index} id={index}/>)
                    })}
                    <button className='form--button--textboxes' onClick={addTextClick}>Add Text</button>
                </div>

                <button className="form--button" onClick={addImageClick}>Add Image</button>
                <div className="form--image">
                    <canvas id='meme' ref={cvs} className="form--meme" height="600" width="1200"></canvas>
                    {resizableList.map((item,index)=>{
                        return (<Resizable cvs={item.cvs} imgwidth={item.imgwidth} key={index} id={index}/>)
                    })}
                </div>
            </form>
            <input
               type="file"
               name="myImage"
               style={{display:'none'}}
               ref={hiddenFileInput}
               onChange={(event) => {
                   // 创建新Image实例并更新状态
                   const newImage = new Image();
                   newImage.src = URL.createObjectURL(event.target.files[0]);
                   setImage(newImage);
              }}
            />
        </main>
    )
};

关键修改点说明 #

1. 修正image状态更新：不再直接修改现有Image实例的src，而是创建新实例并通过setImage更新，确保React感知到状态变化
2. 完善useEffect依赖：给绑定eventBus的useEffect添加resizableList和image依赖，状态更新时重新绑定reDraw，确保函数能捕获最新状态
3. 添加事件清理：在useEffect的返回函数中解绑旧事件，避免内存泄漏
4. 拆分image.onload绑定：将image.onload的绑定放到单独的useEffect中，依赖为image，确保每次新图片加载时都能触发draw函数

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