我是新来的反应者,并停留在这一点上。我正在动作分派器中进行异步API调用以获取患者数据列表。一旦返回数据,我需要将其呈现在网格中。
这是我的代码:
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);
这是我在Patient.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>
</>
)
};