React / Redux AG Grid不加载数据

Question

我有一个使用Redux进行状态管理的React应用程序。

我希望集成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);

如果我使用Material Design Card布局而不是AG-Grid，fetchBookings会工作并填充数据，所以我现在该部分工作正常。

Answer 1

你不应该在构造函数中使用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>
    );
  }