javascript - API调用后填充reaxt ag网格
问题描述
我是新来的反应并停留在这一点上。我正在操作调度程序中执行异步 API 调用以获取患者数据列表。一旦返回数据,我需要在 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);
这是我在 patients.actions.js 中的 fetchPatientsStartAsync():
export const fetchPatientsStartAsync = () => {
return async dispatch => {
dispatch(fetchPatientStart());
try {
const patients = await fetchPatients.fetchPatients();
console.log('Fetched Patients: ', patients);
dispatch(fetchPatientsSuccess(patients.data.patients));
} catch (e) {
console.log('Error: ', e);
dispatch(fetchPatientsFailed());
}
}
};
因此,在我的组件中,fetchPatientsStartAsync 异步运行,无法在我的 ag 网格中呈现数据。有没有办法在这里设置回调或 Promise,这样一旦 fetchPatientsStartAsync() 完成,我就可以进行进一步的 UI 渲染。我也在使用 redux-thunk
解决方案
您不需要将患者置于rowData
状态,因为道具将通过 redux 状态进行更新。正如我所看到的,您的 columnDefs 不是动态的,因此您也可以为此创建一个常量。
const columnDefs = [
{ headerName: 'UID', field: 'UID'},
{ headerName: 'Name', field: 'name'},
{ headerName: 'Cataract Status', field: 'cataractStatus'},
{ headerName: 'Retina Status', field: 'retinaStatus'},
]
const PatientsComponent = ({ patients, isFetching, fetchPatientsStartAsync }) => {
useEffect(() => {
fetchPatientsStartAsync();
}, [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={patients}>
</AgGridReact>
</div>
</div>
</PatientContainer>
</>
)
};
推荐阅读
- javascript - Puppeteer:for 循环 - 语法问题
- html - 背景图像 (CSS) 不会出现在网站上
- python-3.x - Selenium Wire Chrome 驱动程序失去互联网连接
- c# - 在 MVC 中将 ID 替换为名称
- flutter - Flutter TextField:多行,但不换行
- angular - lodash debounce cancel() 不停止 debounce 执行
- python - 我可以使用什么 Python 或 CLI 调用来终止 AWS Spot 实例并从 Spot 实例本身发出请求?
- c# - 主线程处理后如何再次获取 DBContext?
- java - 使用 Intellij 和 Java ME 的语言级别“1.4”不支持泛型
- reactjs - React Native TypeScript 错误:模块“react-native”没有导出成员“外观”