javascript 无法访问AgGrid cellRenderer中的组件状态

dw1jzc5e  于 2023-05-16  发布在  Java
关注(0)|答案(1)|浏览(189)

在我的React应用程序中,使用函数组件,我有一个本地状态(myObj),它通过来自父对象的上下文对象(基于API响应)填充。我使用这个本地状态来填充AgGrid,在这个网格中,我使用cellRenderer创建了一个行级的Edit链接。
现在,我想访问这个cellRenderer中的本地状态(myObj),但我将它作为空对象{}获取
我尝试添加cellRendererParams: {myObj: myObj},但仍然不起作用。
我是否需要添加更多的东西来访问cellRenderer中的函数组件状态

function MyChildComponent(props) {
    const [gridData, setGridData] = useState([]);
    const [myObj, setMyObj] = useState({
        gridItems: [{
            fields: [{
                field1: {},
                field2: {}
            }]
        }]
    });
    
    useEffect(() => {
        //API call to set myObj with data (includes grid data within the API response)
    }, [myContextObjWithData]);
    
    useEffect(() => {
        if (myObj && myObj.gridItems && myObj.gridItems.length > 0) {
            setGridData([{
                'field1': 'Primary',
                'field2': 'F1'
            }, {
                'field1': 'Secondary',
                'field2': 'F2'
            }])
        }
    }, [myObj])
    
    
    setMyColumns([
        {
            headerName: 'Col 1',
            field: 'field1'
        }, {
            headerName: 'Col 2',
            field: 'field2'
        }, {
            headerName: '',
            field: '',
            cellRendererParams: {myObj: myObj},
            cellRenderer: (params) => {
                console.log(myObj); // Returns empty object
            }
        }
    ])
    
    
    return (
        <>
            <MyAgGrid
                id="myGrid"
                columnDefs={myColumns}
                rowData={gridData}
                {...props}
            />
        
        </>
    ); 
}
wpx232ag

wpx232ag1#

尝试在useEffect中更新myColumns状态,myObj具有其依赖项之一。
该组件的生命周期是每当该组件被挂载时,本地状态将被创建并触发与这些状态相对应的useEffect,其进一步更新状态。在您的示例中,您在没有useEffect钩子的情况下调用,这将导致代码提前运行并控制台一个空对象。

相关问题