React/Redux AG Grid 未加载数据

Posted 2023-03-28

【中文标题】React/Redux AG Grid 未加载数据

【英文标题】：React/Redux AG Grid not loading data

【发布时间】：2019-07-25 21:16:01

【问题描述】：

我有一个使用 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 确实可以工作并填充数据，所以我现在该部分工作正常。

【问题讨论】：

没有必要将这些东西放入状态中，除非必要（即改变数据时的某些用例），否则避免使用状态

【参考方案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>
    );
  

【讨论】：

这只是给出了一个空网格，但是状态在那里并且正在填充来自fetchBookings 操作的reutn

明白了！谢谢！它是一个 JSON 对象数组，从 Express API 返回

你实际上可以使用this，只要先调用super(props)

@Dominic 是的，但你不觉得两者都用会让人困惑吗？

是的，我肯定会直接使用道具，但只是说;）