来自 Redux 存储的数据来晚了，所以它不会填满 AG 网格表/反应钩子

Posted 2023-03-28

【中文标题】来自 Redux 存储的数据来晚了，所以它不会填满 AG 网格表/反应钩子

【英文标题】：Data from Redux store coming late so it doesn't fill AG grid table/ react hook

【发布时间】：2021-11-21 07:23:17

【问题描述】：

我尝试从 redux 存储中获取状态，然后通过 updateData 填充 AG 网格表。

这是我的组件。

const DisplayRules = () => 
    const rules = useSelector((rules) => rules.data);
    const dispatch = useDispatch();
    const [gridApi, setGridApi] = useState(null);
    const [gridColumnApi, setGridColumnApi] = useState(null);
    const [rowData, setRowData] = useState(null);
  
    const onGridReady = (params) => 
      setGridApi(params.api);
      setGridColumnApi(params.columnApi);
  
      const updateData = (data) => 
        setRowData(data);
      ;

      if (rules) 
        updateData(rules);
    ;

    function isFirstColumn(params) 
        var displayedColumns = params.columnApi.getAllDisplayedColumns();
        var thisIsFirstColumn = displayedColumns[0] === params.column;
        return thisIsFirstColumn;
      
    return (
        <div>
            <Typography
                style=marginBottom: '5px'
                component='h5'
                variant='h5'
                align='center'>
                Rule List
            </Typography>
            <div className='ag-theme-material' style=height: '450px'>
                <AgGridReact
                    frameworkComponents=
                        EditSection,
                    
                    defaultColDef=
                        flex: 1,
                        minWidth: 50,
                        resizable: true,
                        headerCheckboxSelection: isFirstColumn,
                        checkboxSelection: isFirstColumn,
                    
                    suppressRowClickSelection=true
                    rowSelection='multiple'
                    onGridReady=onGridReady
                    rowData=rowData                    
                    rowDragManaged=true
                    animateRows=true
                    overlayNoRowsTemplate='There is no rule added yet'
                    overlayLoadingTemplate='Loading..'
                >
                    <AgGridColumn headerName= "Name" field="name" rowDrag=true />                    
                    <AgGridColumn headerName= "Type" field="type"/>
                    <AgGridColumn headerName= "Id" field="id" hide= true suppressToolPanel= true/>
                    <AgGridColumn headerName= "Edit" field="Edit" cellRenderer= 'EditSection' cellRendererParams= 
                    "gridApi": gridApi/>
                </AgGridReact>
            </div>
            <Button
                variant='contained'
                color='primary'
                startIcon=<PreviewIcon />
                onClick=() => 
                    console.log('previewRules');
                >
                Preview
            </Button>
        </div>
    );
;

现在我从商店获得规则，但起初它是空的。然后我在一秒钟后得到它但是行不会在它之后更新。每次规则更改时，我都尝试使用 useEffect 并设置状态（重新渲染组件），但它不起作用。如何解决这个问题？

另外，我希望它在每次编辑部分更改时重新渲染组件。我试图将 setRowData 作为参数传递，但它也不起作用。我也感谢对此提供的任何帮助。谢谢

【参考方案1】：

尝试：

    React.useEffect(() => 
        setRowData(rules);
    , [rules]);

将在每次规则更改时重新呈现。它也应该适用于编辑组件

【参考方案2】：

你可以这样做

  rowData=rules  

并且 ag-grid 将遵循 redux 状态。真的没有必要在中间使用本地组件状态。