时间戳

首页 > 解决方案 > 在 React 的 MaterialTable 中首次加载数据时面临问题

reactjs - 在 React 的 MaterialTable 中首次加载数据时面临问题

问题描述

我是反应和减少的新手。我正在使用 MaterialTable 并希望在服务器端分页示例中通过 redux 加载数据。但问题是当我使用来自 redux 的远程数据时。默认情况下不加载它。似乎表格在道具更新之前得到了渲染。

我是反应和减少的新手。我正在使用 MaterialTable 并希望在服务器端分页示例中通过 redux 加载数据。但问题是当我使用来自 redux 的远程数据时。默认情况下不加载它。似乎表格在道具更新之前得到了渲染。

//车辆列表组件

import React, { Component } from "react";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import { connect } from "react-redux";
import MaterialTable from "material-table";
import { getVehichles } from "../../store/actions/vehichleActions";
import axios from "axios";


class vehichleActionButtons extends Component {
 constructor(props) {
 super(props);
 this.tableRef = React.createRef();
 }

 refreshTableData = () => {
 if(this.tableRef.current) {
 this.tableRef.current.onQueryChange()
 } 
 }


 render() {

 return (
     <Box m={6}>
     <Grid container>
         <Grid item xs>
         <Box m={2}> <MaterialTable
         tableRef={this.tableRef}
         columns={this.props.vehichles.columns}
         data={(query) => new Promise((resolve, reject) => {
             this.props.getVehichles(query);
             resolve({
             data: this.props.vehichles.rows,
             page:query.page,
             totalCount: this.props.vehichles.totalCount,
             });
         })
         }
         title="Vehichle List"
         /></Box>
         </Grid>
     </Grid>
     </Box>
 );
 }
}

const mapStateToProps = (state) => {

 return {
 vehichles: state.vehichle,
 };
};

const mapDispatchToProps = (dispatch) => {
 return {
 getVehichles: (query) => dispatch(getVehichles(query)),
 };
};

export default connect(
 mapStateToProps,
 mapDispatchToProps
)(vehichleActionButtons);

//action code is 

import axios from 'axios';
export const getVehichles = (query) => {
 return  (dispatch, getState) => {
     dispatch({ type: "GETTING_VEHICHLES_LIST"});
     let url = "http://my-json-server.typicode.com/mksrivastava/zwe/rows?";
     url += "_limit=" + query.pageSize;
     url += "&_page=" + (query.page + 1);
     axios.get(url).then(
     (resp) => {
         dispatch({ type: "GET_VEHICHLES_LIST", resp })},
     (error) =>
         dispatch({
         type: "GET_VEHICHLES_LIST_ERROR",
         error: error.message || "Unexpected Error!!!",
         })
     );

 };

}
//reducer code is 
const initState = {
 rows: [],
 columns: [
 { title: "Vehicle No", field: "vehicleNo" },
 { title: "Date of Reg", field: "dateOfReg", type: "date" },
 { title: "Status of Reg", field: "statusOfReg" },
 { title: "Engine Type", field: "EngineType" },
 { title: "Modal Year", field: "year" },
 ],
 totalCount: 0,
 loaded: false
};

const vehichleReducer = (state = initState, action) => {
 switch (action.type) {
 case "GETTING_VEHICHLES_LIST":
     return {
     ...state,
     loaded:false
     }
 case "GET_VEHICHLES_LIST":
     return {
     ...state,
     rows: action.resp.data,
     totalCount: +action.resp.headers['x-total-count'],
     loaded:true
     }

 default:
     return state;
 }
};
export default vehichleReducer;```

Could someone please recheck and help me to solve this. It looks like the material table is not fully supported redux

Thanks in advance

标签： reactjsmaterial-table

解决方案

推荐阅读