动态创建mathlive字段后移除元素，输入触发状态回退问题求助

我正在动态创建mathlive字段并添加至DOM中，因为无法以React组件形式添加该元素，只能采用这种临时方案。目前遇到的问题是：从负责渲染元素的数组中移除元素时，操作符合预期，但剩余的mathlive字段触发input事件时，数组会恢复到元素移除前的状态。

相关代码 #

状态与初始化逻辑 #

const defaultOptions = [
    { text: '' },
    { text: '' },
    { text: '' },
    { text: '' },
]
const [options, setOptions] = useState(defaultOptions)

useEffect(() => {
    if (isPhysicsMathType) {
        options.map((option, i) => {
            addMathfield(option, i)
        })
    }
}, [isPhysicsMathType])

const addMathfield = (option, i) => {
    const mfe = new MathfieldElement()
    mfe.setAttribute('virtual-keyboard-mode', 'manual')
    mfe.value = option.text
    mfe.addEventListener('input', ev => {
        handleOptionChanged(ev, i)
    })
    let parent = null;
    const elementSelectInterval = setInterval(() => {
        parent = document.querySelector('.mathfield' + i)
        if (parent) {
            parent.appendChild(mfe)
            clearInterval(elementSelectInterval)
        }
    }, 50)
}

移除元素逻辑 #

const handleRemoveOption = () => {
    const choices = [...options]
    choices.pop()
    setOptions(choices)
}

元素渲染逻辑 #

options.map((option, i) => {
 return <div key={"option" + i} className={'mathfield' + i}></div>
})

问题原因与修复方案 #

核心问题 #

1. Effect依赖不全：useEffect仅监听isPhysicsMathType，当options数组更新（比如移除元素）时，不会重新执行Effect，导致旧的mathlive元素仍绑定着旧数组的状态和索引，触发input时会基于旧状态更新，造成数组回滚。
2. 索引绑定风险：用数组索引i作为状态更新的标识，移除元素后剩余元素的索引会变化，但已创建的mathlive元素仍绑定旧索引，更新时会修改错误的数组位置。
3. 未清理旧DOM元素：移除数组元素后，对应的旧mathlive元素未从DOM中清理，仍在监听事件，干扰状态更新。

具体修复步骤 #

1. 完善Effect的依赖与清理逻辑

将options加入依赖数组，同时添加清理函数，确保每次数组变化时重新创建mathlive元素，并清理旧元素和事件监听：

useEffect(() => {
    if (!isPhysicsMathType) return;
    
    // 清理已存在的mathfield元素
    document.querySelectorAll('.mathfield').forEach(el => {
        const mfe = el.querySelector('math-field');
        if (mfe) {
            mfe.removeEventListener('input', () => {});
            mfe.remove();
        }
    });
    
    options.map((option, i) => {
        addMathfield(option, i);
    });
    
    // 组件卸载或依赖变化时执行清理
    return () => {
        document.querySelectorAll('math-field').forEach(mfe => {
            mfe.removeEventListener('input', () => {});
            mfe.remove();
        });
    };
}, [isPhysicsMathType, options]); // 添加options到依赖数组

2. 用唯一ID替代数组索引绑定

给每个option添加唯一标识，避免索引变化带来的错误：

// 初始化时给每个选项添加唯一id
const defaultOptions = [
    { id: Date.now() + 1, text: '' },
    { id: Date.now() + 2, text: '' },
    { id: Date.now() + 3, text: '' },
    { id: Date.now() + 4, text: '' },
];

// 更新状态时根据id匹配，而非索引
const handleOptionChanged = (ev, id) => {
    setOptions(prevOptions => 
        prevOptions.map(opt => 
            opt.id === id ? { ...opt, text: ev.target.value } : opt
        )
    );
};

// 修改addMathfield，传入id而非索引
const addMathfield = (option) => {
    const mfe = new MathfieldElement();
    mfe.setAttribute('virtual-keyboard-mode', 'manual');
    mfe.value = option.text;
    mfe.addEventListener('input', ev => {
        handleOptionChanged(ev, option.id);
    });
    let parent = null;
    const elementSelectInterval = setInterval(() => {
        parent = document.querySelector(`.mathfield-${option.id}`);
        if (parent && !parent.querySelector('math-field')) {
            parent.appendChild(mfe);
            clearInterval(elementSelectInterval);
        }
    }, 50);
};

// 渲染时用id作为key和className
options.map((option) => {
    return <div key={option.id} className={`mathfield-${option.id}`}></div>
});

3. 简化移除元素逻辑

const handleRemoveOption = () => {
    setOptions(prev => prev.slice(0, -1));
};

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