Reactjs React中物料表首次加载数据面临的问题

我是一个新的反应和重复。我正在使用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

import React，{Component}来自“React”；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Box”导入框；
从“react redux”导入{connect}；
从“物料表”中导入物料表；
从“../../store/actions/VehicleActions”导入{GetVehicles}”；
从“axios”导入axios；
类操作按钮扩展组件{
建造师（道具）{
超级（道具）；
this.tableRef=React.createRef（）；
}
refreshTableData=（）=>{
如果（此表参考当前）{
this.tableRef.current.onQueryChange（）
} 
}
render（）{
返回(
新承诺（（解决、拒绝）=>{
this.props.getVehicles（查询）；
决心({
数据：this.props.vehicles.rows，
page:query.page，
totalCount:this.props.vehicles.totalCount，
});
})
}
title=“车辆列表”
/>
);
}
}
常量mapStateToProps=（状态）=>{
返回{
车辆：state.vehicle，
};
};
const mapDispatchToProps=（调度）=>{
返回{
GetVehicles：（查询）=>调度（GetVehicles（查询）），
};
};
导出默认连接(
MapStateTops，
mapDispatchToProps
)（车辆按钮）；
//行动代码是
从“axios”导入axios；
导出常量GetVehicles=（查询）=>{
返回（调度，获取状态）=>{
调度（{类型：“获取车辆列表”}）；
让url=”http://my-json-server.typicode.com/mksrivastava/zwe/rows?";
url+=“\u limit=“+query.pageSize；
url+=”&_page=“+（query.page+1）；
获取（url），然后(
（resp）=>{
调度（{type:“获取车辆列表”，resp}），
（错误）=>
派遣({
键入：“获取车辆列表错误”，
错误：error.message | |“意外错误！！！”，
})
);
};
}
//减速器代码为
常量initState={
行：[]，
栏目：[
{标题：“车辆编号”，字段：“车辆编号”}，
{标题：“登记日期”，字段：“dateOfReg”，类型：“Date”}，
{标题：“注册状态”，字段：“注册状态”}，
{标题：“引擎类型”，字段：“引擎类型”}，
{标题：“模态年”，字段：“年”}，
],
总数：0，
加载：false
};
const vehicleReducer=（state=initState，action）=>{
开关（动作类型）{
案例“获取车辆列表”：
返回{
……国家，
加载：false
}
案例“获取车辆列表”：
返回{
……国家，
行：action.resp.data，
totalCount:+action.resp.headers['x-total-count']，
加载：正确
}
违约：
返回状态；
}
};
导出默认车辆减速器```
请有人再检查一下，帮我解决这个问题。看起来该材质表不完全受支持
提前谢谢

您将元素渲染与状态更改混合在一起。状态只是数据；不是组件。因此，应使用数据填充您的状态，并且当数据存在时，MaterialTable应使用实际数据作为道具进行呈现。Hi已更新组件，但仍面临相同的问题您仍在渲染调用中触发此.props.getVehicles（查询）。如果要修改对象的状态，需要在对象渲染之前或使用setState调用进行修改。有关更多信息，请参阅将元素渲染与状态更改混合使用。状态只是数据；不是组件。因此，应使用数据填充您的状态，并且当数据存在时，MaterialTable应使用实际数据作为道具进行呈现。Hi已更新组件，但仍面临相同的问题您仍在渲染调用中触发此.props.getVehicles（查询）。如果要修改对象的状态，需要在呈现对象之前或使用setState调用进行修改。有关详细信息，请参阅