在我的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}
/>
</>
);
}
1条答案
按热度按时间wpx232ag1#
尝试在
useEffect
中更新myColumns
状态,myObj
具有其依赖项之一。该组件的生命周期是每当该组件被挂载时,本地状态将被创建并触发与这些状态相对应的useEffect,其进一步更新状态。在您的示例中,您在没有useEffect钩子的情况下调用,这将导致代码提前运行并控制台一个空对象。