来自 Redux 存储的数据来晚了，所以它没有填满 AG 网格 table/ react hook

Question

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

这是我的组件。

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 作为参数传递，但它也不起作用。我也很感激在这方面的任何帮助。谢谢

Answer 1

试试：

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

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

Answer 2

你可以做到

  rowData={rules}

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

来自 Redux 存储的数据来晚了，所以它没有填满 AG 网格 table/ react hook

Data from Redux store coming late so it doesn't fill AG grid table/ react hook

reactjs

redux

ag-grid

react-hooks