React函数组件集成Tabulator时状态更新失效的解决咨询

你的代码核心问题在于将Toolbar的JSX存入state后，它只会初始化渲染一次，后续dataIsStale状态更新时，按钮不会重新渲染，因此disabled属性始终保持初始值。另外dataChanged回调里的console.log打印旧值是闭包导致的，但不影响状态更新本身。

修改后的代码 #

import React from 'react';
import { TabulatorFull as Tabulator } from 'tabulator-tables';
import 'tabulator-tables/dist/css/tabulator_modern.min.css';

export default function Table(properties) {
    const [dataIsStale, setDataIsStale] = React.useState(false);
    const tabulatorRef = React.useRef(null); // 用ref持久化Tabulator实例

    React.useEffect(() => {
        // 仅初始化一次Tabulator实例
        if (!tabulatorRef.current) {
            const tabulatorOptions = {         
                columns: [{title: 'name', field: 'name', editor: true}],         
                data: [
                    {id: 1, name: 'foo'},
                    {id:2, name: 'baa'}
                ]          
            };
            tabulatorRef.current = new Tabulator('#tabulator-placeholder', tabulatorOptions);

            tabulatorRef.current.on('dataChanged', () => {           
                setDataIsStale(true);
            });
        }

        // 组件卸载时销毁Tabulator实例，避免内存泄漏
        return () => {
            if (tabulatorRef.current) {
                tabulatorRef.current.destroy();
                tabulatorRef.current = null;
            }
        };
    }, []);

    // 直接在return中渲染按钮，状态变化时自动更新
    return (
        <div>
            <button 
                disabled={!dataIsStale}
                onClick={() => {
                    if (tabulatorRef.current) {
                        alert(JSON.stringify(tabulatorRef.current.getData()));
                        setDataIsStale(false); // 点击后重置状态，按钮重新禁用
                    }
                }}
            >
                Apply
            </button>
            <div id="tabulator-placeholder"></div>
        </div>
    );
}

关键修改点 #

• 用useRef保存Tabulator实例，确保组件生命周期内可访问最新实例
• 不再将Toolbar JSX存入state，直接在return中渲染，状态变化时按钮自动更新disabled属性
• 添加组件卸载时的清理逻辑，销毁Tabulator实例避免内存泄漏
• 新增点击Apply后重置dataIsStale的逻辑，符合常规交互体验

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