React中AG-Grid绑定数组未随可编辑字段输入更新的解决方法

问题分析 #

你直接修改params.data['comments']时，仅改动了原对象的属性，但React的rowData是引用类型状态，未触发setRowData更新引用，导致React无法感知数据变化，最终拿到的rowData还是旧值。另外你的AgGridReact组件属性写法错误，需将rowData和columnDefs作为组件props传递，而非子元素。

解决方案一：通过valueSetter同步更新React状态 #

在valueSetter中，当值发生变化时，创建新的行数据数组并更新rowData状态，保证React能追踪数据变化，后续可直接用rowData发送到后端。

修改后的完整代码：

import React, { useEffect, useState, useRef } from "react";
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { getData } from '../service';

const MainPage = ({ data }) => {
    const [rowData, setRowData] = useState([]);
    const [columnDefs, setColDefs] = useState([]);
    const gridRef = useRef();

    const prepareCol = () => {
        const fields = [];
        fields.push({
            field: "ID"
        });

        fields.push({
            headerName: 'comments',
            editable: true,
            valueSetter: params => {
                if (params.data.comments !== params.newValue) {
                    // 不可变更新行数据，触发React状态变化
                    const newRowData = rowData.map(row => {
                        if (row.ID === params.data.ID) {
                            return { ...row, comments: params.newValue };
                        }
                        return row;
                    });
                    setRowData(newRowData);
                    return true;
                }
                return false;
            },
            valueGetter: params => params.data.comments || ''
        });
        return fields;
    }

    useEffect(() => {
        getData().then(res => {
            // 初始化每条数据的comments字段，避免undefined
            const initRowData = res.rowData.map(row => ({ ...row, comments: row.comments || '' }));
            setRowData(initRowData);
            setColDefs(prepareCol()); // 调用函数获取列配置，而非传递函数引用
        });
    }, []);

    // 提交数据到后端的函数
    const sendToBackend = () => {
        // 直接使用最新的rowData
        console.log('待提交数据：', rowData);
        // 此处调用后端接口，示例：
        // fetch('/api/submit', {
        //     method: 'POST',
        //     body: JSON.stringify(rowData),
        //     headers: { 'Content-Type': 'application/json' }
        // })
    }

    return (
        <>
            <div className="ag-theme-alpine" style={{ height: 400, width: '100%' }}>
                {/* 修正AgGridReact的props传递方式 */}
                <AgGridReact
                    ref={gridRef}
                    rowData={rowData}
                    columnDefs={columnDefs}
                />
            </div>
            <button onClick={sendToBackend}>提交评论到后端</button>
        </>
    )
}

export default MainPage;

解决方案二：从AG-Grid实例获取最新数据 #

若不想每次编辑都更新React状态，可在提交时通过grid实例API直接获取最新行数据：

// 提交数据到后端的函数
const sendToBackend = () => {
    if (gridRef.current) {
        const latestRowData = gridRef.current.api.getRowData();
        console.log('最新数据：', latestRowData);
        // 调用后端接口发送latestRowData
    }
}

关键注意点 #

• 确保AgGridReact的props写法正确，属性需放在组件标签内部。
• 处理数据时使用不可变更新，避免直接修改原对象，保证React状态的可追踪性。
• 初始化数据时给comments设置默认空字符串，避免编辑时出现undefined问题。

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