Javascript API调用后填充REEXT ag网格

我是一个新的反应，在这一点上卡住了。 我正在使用异步API调用action dispatcher来获取患者数据列表。返回数据后，我需要将其呈现在ag网格中

这是我的代码：

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { fetchPatientsStartAsync } from '../../redux/patients/patients.actions';
import { PatientContainer } from './patients.styles';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-balham.css';

const PatientsComponent = ({ patients, isFetching, fetchPatientsStartAsync }) => {

const [columnDefs, setColumnDefs] = useState([]);

const [rowData, setRowData] = useState([]);

useEffect(() => {
  fetchPatientsStartAsync();
  if (!isFetching && patients) {
  setColumnDefs([
    { headerName: 'UID', field: 'UID'},
    { headerName: 'Name', field: 'name'},
    { headerName: 'Cataract Status', field: 'cataractStatus'},
    { headerName: 'Retina Status', field: 'retinaStatus'},
  ]);
  setRowData(patients);
}
}, [fetchPatientsStartAsync]);

if (!patients ) {
return (
    <>
      <h4>No Patient data for today</h4>
    </>
  )
}
return (
  <>
    <PatientContainer>
      <h1>Patient's Page</h1>
      <div>
        <div className="ag-theme-balham" style={ {height: '50vh'} }>
          <AgGridReact
              columnDefs={columnDefs}
              rowData={rowData}>
          </AgGridReact>
        </div>
      </div>
    </PatientContainer>
  </>
)
};

const mapStateToProps = state => ({
  patients: state.patients.patients,
  isFetching: state.patients.isFetching
});

 export default connect(mapStateToProps, { fetchPatientsStartAsync })(PatientsComponent);

---

因此，在我的组件中，fetchPatientsStartAsync是异步运行的，我无法在ag网格中呈现数据。有没有办法在这里设置回调或承诺，以便在完成fetchPatientsStartAsync（）后，我可以进行进一步的UI呈现。另外，我正在使用redux thunk

您不需要将患者置于

行数据

状态，因为道具将通过redux状态更新。正如我所看到的，ColumnDef不是动态的，因此您也可以为此创建一个常量

const columnDefs=[
{headerName:'UID'，字段：'UID'}，
{headerName:'Name'，field:'Name'}，
{headerName:'白内障状态'，字段：'白内障状态'}，
{headerName:'retinaStatus'，字段：'retinaStatus'}，
]
const PatientsComponent=（{patients，isFetching，fetchPatientsStartAsync}）=>{
useffect（（）=>{
fetchPatientsStartAsync（）；
}，[fetchPatientsStartAsync]）；
如果（！患者）{
不返回今天的患者数据
}
返回(
病人页
)
};

好的，我的问题解决了。问题在于样式导入。 而不是：

import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-balham.css';

我用了这个：（问题解决了）

---

我按照你的建议做了更改，但是仍然没有幸运的是你的状态在redux中正确更新了吗？是的，我在redux devtools中检查了它，它正在更新。检查这个：你能给一个链接到可复制的例子吗？现在我的代码处于embroyonic阶段，后端部分也在本地，而且没有部署到任何地方，所以很难共享链接，但如果可以的话，我会尝试

import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid/dist/styles/ag-theme-balham.css';

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";