AgGrid cellRenderer中动态访问React组件状态的策略

function MyChildComponent(props) {
    const [gridData, setGridData] = useState([]);
    const [myObj, setMyObj] = useState({ /* 初始空对象 */ });
    const [myColumns, setMyColumns] = useState([]); // 假设列定义也是状态

    useEffect(() => {
        // 模拟API调用，异步设置 myObj
        // myContextObjWithData 变化时触发
        setTimeout(() => {
            setMyObj({
                gridItems: [{
                    fields: [{
                        field1: 'Data1',
                        field2: 'Data2'
                    }]
                }]
            });
        }, 1000);
    }, [myContextObjWithData]); // 假设这里是上下文数据

    useEffect(() => {
        if (myObj && myObj.gridItems && myObj.gridItems.length > 0) {
            setGridData([{
                'field1': 'Primary',
                'field2': 'F1'
            }, {
                'field1': 'Secondary',
                'field2': 'F2'
            }]);
        }
    }, [myObj]);

    // **问题所在：此处定义 myColumns 时，myObj 可能仍是初始空值**
    setMyColumns([
        {
            headerName: 'Col 1',
            field: 'field1'
        }, {
            headerName: 'Col 2',
            field: 'field2'
        }, {
            headerName: '',
            field: '',
            cellRendererParams: { myObj: myObj }, // 此时 myObj 可能是空对象
            cellRenderer: (params) => {
                console.log(myObj); // 打印出空对象 {}
                return 'Edit';
            }
        }
    ]);

    return (
        <MyAgGrid
            id="myGrid"
            columnDefs={myColumns}
            rowData={gridData}
            {...props}
        />
    );
}

import React, { useState, useEffect, useMemo } from 'react';
import { AgGridReact } from 'ag-grid-react'; // 假设你有一个MyAgGrid组件封装了AgGridReact

// 假设 MyAgGrid 是 AgGridReact 的一个简单封装
const MyAgGrid = ({ id, columnDefs, rowData, ...props }) => (
    <div className="ag-theme-alpine" style={{ height: 400, width: '100%' }}>
        <AgGridReact
            id={id}
            columnDefs={columnDefs}
            rowData={rowData}
            {...props}
        />
    </div>
);


function MyChildComponent(props) {
    const [gridData, setGridData] = useState([]);
    const [myObj, setMyObj] = useState({}); // 初始空对象
    const [myColumns, setMyColumns] = useState([]); // 列定义作为状态

    // 模拟API调用，异步设置 myObj
    useEffect(() => {
        // 假设 myContextObjWithData 是一个从上下文获取的数据，
        // 它的变化会触发这个 useEffect，进而模拟数据加载
        console.log("Fetching data based on myContextObjWithData...");
        setTimeout(() => {
            const fetchedData = {
                gridItems: [{
                    fields: [{
                        field1: 'Primary Data',
                        field2: 'F1-AgGrid'
                    }]
                }]
            };
            setMyObj(fetchedData);
            console.log("myObj updated:", fetchedData);
        }, 1500); // 模拟网络延迟
    }, [props.myContextObjWithData]); // 假设 myContextObjWithData 是从 props 传入或 context 获取

    // 根据 myObj 更新 gridData
    useEffect(() => {
        if (myObj && myObj.gridItems && myObj.gridItems.length > 0) {
            console.log("myObj changed, updating gridData...");
            setGridData([{
                'field1': 'Row 1 Field 1',
                'field2': 'Row 1 Field 2'
            }, {
                'field1': 'Row 2 Field 1',
                'field2': 'Row 2 Field 2'
            }]);
        } else {
            setGridData([]); // myObj 为空时清空数据
        }
    }, [myObj]);

    // **核心解决方案：在 useEffect 中根据 myObj 的变化更新 myColumns**
    useEffect(() => {
        console.log("myObj changed, updating myColumns...");
        setMyColumns([
            {
                headerName: 'Col 1',
                field: 'field1'
            }, {
                headerName: 'Col 2',
                field: 'field2'
            }, {
                headerName: '操作',
                field: 'actions', // 可以给一个虚拟的 field
                cellRendererParams: { myObj: myObj }, // 此时 myObj 已经是最新值
                cellRenderer: (params) => {
                    // 在这里，myObj 已经包含了最新的数据
                    console.log("Inside cellRenderer, accessing myObj:", params.myObj);
                    if (params.myObj && params.myObj.gridItems && params.myObj.gridItems.length > 0) {
                        return `Edit (${params.myObj.gridItems[0].fields[0].field1})`;
                    }
                    return 'Edit';
                }
            }
        ]);
    }, [myObj]); // 将 myObj 作为依赖项

    return (
        <>
            <h3>AgGrid State Access Demo</h3>
            <p>Current myObj state: {JSON.stringify(myObj)}</p>
            <MyAgGrid
                id="myGrid"
                columnDefs={myColumns}
                rowData={gridData}
                {...props}
            />
        </>
    );
}

export default MyChildComponent;