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