React / Redux AG Grid не загружает данные - PullRequest
Новая
       26

React / Redux AG Grid не загружает данные

0 голосов
/ 04 марта 2019

У меня есть приложение React, которое использует Redux для управления состоянием.

Я ищу интеграцию AG-Grid для отображения хорошей сетки данных, но когда я пытаюсь установить rowData насостояние для данных не возвращает строк.

BookingList.js 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchBookings } from '../../actions';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

class BookingList extends Component {
  componentDidMount() {
    this.props.fetchBookings();
  }
  constructor(props) {
    super(props);
    this.state = {
      columnDefs: [
        {
          headerName: 'First Name',
          field: 'firstName'
        },
        {
          headerName: 'Last Name',
          field: 'lastName'
        },
        {
          headerName: 'Email',
          field: 'emailAddress'
        },
        {
          headerName: 'Address',
          field: 'address'
        },
        {
          headerName: 'Market Date',
          field: 'marketDate'
        },
        {
          headerName: 'Stall Type',
          field: 'stallType'
        }
      ],
      rowData: [this.props.bookings]
    };
  }

  render() {
    return (
      <div className="ag-theme-balham">
        <AgGridReact
          columnDefs={this.state.columnDefs}
          rowData={this.state.rowData}
        />
      </div>
    );
  }
}

function mapStateToProps({ bookings }) {
  return { bookings };
}
export default connect(
  mapStateToProps,
  { fetchBookings }
)(BookingList);

fetchBookings работает и заполняет данные, если я использую компоновку Card Design Material, а не AG-Grid, такУ меня сейчас эта часть работает правильно.

1 Ответ

0 голосов
/ 04 марта 2019

Вы не должны использовать this внутри конструктора для адреса props:

Изменить на: 

constructor(props) {
    super(props);
    this.state = {
      columnDefs: [
        {
          headerName: 'First Name',
          field: 'firstName'
        },
        {
          headerName: 'Last Name',
          field: 'lastName'
        },
        {
          headerName: 'Email',
          field: 'emailAddress'
        },
        {
          headerName: 'Address',
          field: 'address'
        },
        {
          headerName: 'Market Date',
          field: 'marketDate'
        },
        {
          headerName: 'Stall Type',
          field: 'stallType'
        }
      ],
      rowData: props.bookings // assuming bookings is an array already
    };
  }

Однако, если вы подключаетесь с помощью redux, может быть лучшепросто использовать props и держать rowData в состоянии: 

  render() {
    return (
      <div className="ag-theme-balham">
        <AgGridReact
          columnDefs={this.state.columnDefs}
          rowData={this.props.bookings}
        />
      </div>
    );
  }
...