Заполнение сетки reaxt ag после вызова API - PullRequest
Новая
       22

Заполнение сетки reaxt ag после вызова API

0 голосов
/ 27 января 2020

Я новичок, чтобы реагировать и застрял в этой точке. Я выполняю asyn c вызов 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);

И это мой fetchPatientsStartAsyn c () внутри Patient.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());
    }
  }
 };

Так что в мой компонент fetchPatientsStartAsyn c работает асинхронно и не может отобразить данные в моей сетке ag. Есть ли способ установить обратный вызов или Promise здесь, чтобы после завершения fetchPatientsStartAsyn c () я мог выполнять дальнейшую визуализацию пользовательского интерфейса. Также использую redux-thunk

Ответы [ 2 ]

0 голосов
/ 28 января 2020

хорошо, моя проблема исправлена. Проблема заключалась в импорте стилей. Вместо: 

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";
0 голосов
/ 27 января 2020

Вам не нужно переводить пациентов в состояние rowData, так как реквизиты будут обновляться через избыточное состояние. Как я вижу, ваши columnDef не являются динамическими c, поэтому вы также можете создать константу для этого. 

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>
    </>
  )
};
...