在 API 调用后填充 reaxt ag 网格 [英] Populating reaxt ag grid after API call

问题描述

我刚开始做出反应并停留在这一点上.我正在操作调度程序中执行异步 API 调用以获取患者数据列表.返回数据后，我需要将其呈现在 ag 网格中.

这是我的代码:

import React, { useEffect, useState } from 'react';从'react-redux'导入{连接}；从 '../../redux/patients/patients.actions' 导入 { fetchPatientsStartAsync };从 './patients.styles' 导入 { PatientContainer };从'ag-grid-react'导入{AgGridReact}；导入 'ag-grid/dist/styles/ag-grid.css';导入'ag-grid/dist/styles/ag-theme-balham.css';constPatientsComponent = ({病人, isFetching, fetchPatientsStartAsync }) =>{const [columnDefs, setColumnDefs] = useState([]);const [rowData, setRowData] = useState([]);useEffect(() => {fetchPatientsStartAsync();如果 (!isFetching && 患者) {setColumnDefs([{ headerName:'UID'，字段:'UID'}，{ headerName: '姓名', 字段: '姓名'},{ headerName: '白内障状态', 字段: 'cataractStatus'},{ headerName: 'Retina Status', field: 'retinaStatus'},]);setRowData(患者)；}}, [fetchPatientsStartAsync]);如果(！患者){返回 (<><h4>没有今天的患者数据</h4></>)}返回 (<><患者容器><h1>患者页面</h1><div><div className="ag-theme-balham" style={ {height: '50vh'} }><AgGridReactcolumnDefs={columnDefs}rowData={rowData}></AgGridReact>

</PatientContainer></>)};const mapStateToProps = state =>({患者:state.patients.patients，isFetching: state.patients.isFetching});导出默认连接(mapStateToProps, { fetchPatientsStartAsync })(PatientsComponent);

这是我在patients.actions.js中的fetchPatientsStartAsync():

export const fetchPatientsStartAsync = () =>{返回异步调度 =>{调度(fetchPatientStart())；尝试 {常量患者 = 等待 fetchPatients.fetchPatients();console.log('获取患者:', 患者);dispatch(fetchPatientsSuccess(patients.data.patients));}赶上(e){console.log('错误:', e);调度(fetchPatientsFailed())；}}};

所以在我的组件 fetchPatientsStartAsync 中异步运行并且无法在我的 ag 网格中呈现数据.有没有办法在这里设置回调或 Promise，这样一旦 fetchPatientsStartAsync() 完成，我就可以做进一步的 UI 渲染.也在使用 redux-thunk

解决方案

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

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

我用过这个:(问题已解决)

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

I am new to react and stuck at this point. I am doing an async API call in action dispatcher to fetch a list of patient data.Once the data is returned I need to render it in ag grid.

This is my code:

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);

And this is my fetchPatientsStartAsync() inside patients.actions.js:

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());
    }
  }
 };

So In my component fetchPatientsStartAsync is running asynchronously and am unable to render data in my ag grid. Is there a way to set a callback or Promise here, so that once fetchPatientsStartAsync() is completed I can do further UI rendering. Also am using redux-thunk

解决方案

ok, my problem is fixed. The issue was with styles import. Instead of:

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

I used this: (and issue was fixed)

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

这篇关于在 API 调用后填充 reaxt ag 网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！