我正在使用<MaterialTable />在正在构建的应用程序中显示数据，我希望在我的redux存储中更改一个道具，并且当它更改时，我想将表的标题设置为预期的prop并将其用作api调用中的参数[在我的redux存储中始终有一个具有该prop的默认对象]。这在开发中工作正常，在我部署时也工作正常...但是有时它会抛出此错误 Error：Minified React error＃185;请访问https://reactjs.org/docs/error-decoder.html?invariant=185获取完整消息，或使用非最小化的dev环境获取完整错误和其他有用的警告。我不知道该怎么办，该应用程序已在线
这就是我的代码。
import { CheckOutlined, CloseOutlined } from '@material-ui/icons';
import Axios from 'axios';
import MaterialTable from 'material-table';
import React, { useEffect, useRef, useState } from 'react';
import DocumentTitle from 'react-document-title';
import { connect } from 'react-redux';
import { Col, Row, Table } from 'reactstrap';
import { baseURL } from '../../../../action/api';
import { getAllWarebillRequests, getWarehouses, deleteWarebillRequest } from '../../../../action/BO/action.warehouse';
import { moneyFormater } from '../../../../utils/nairaFormater';
import IsAdmin from '../../../Components/hoc/admin-hoc';
import tableIcons from '../../../Components/Icons/Icons';
import { error, success } from '../../../Components/Notification/Notification';
const Modal = React.lazy(() => import("../../../Components/Modal/Modal"));
const AdminViewWareBill = (props) => {
const tableRef = useRef(null)
const [stocksShipped, setStocksShipped] = useState([]);
useEffect(() => {
tableRef.current && tableRef.current.onQueryChange();
}, [props.selectedWarehouse.warehouseName])
const view = (e, data) => {
setStocksShipped(data[0].waybilledStocks);
}
const deleteWarebill = (ids) => {
props.deleteWarebillRequest(ids).then(value => {
tableRef.current && tableRef.current.onQueryChange()
success("Success", "topRight", `Waybill Deleted Successfully`)
}).catch(err => {
if (!err) return error("Error", "topRight", "Oops... An error occured");
error("Error", "topRight", err.data.message ? err.data.message : "Oops... An error occured");
})
}
return (
<DocumentTitle title="View Waybill">
<div className="animated fadeIn">
<Row className="justify-content-center">
<Col color="success" className="mt-5 mb-5" xs="12" md="10" sm="12">
<MaterialTable
tableRef={tableRef}
title={props.selectedWarehouse.warehouseName + "'s Waybill Request"}
columns={[
{ title: "Number", field: "waybillInvoiceNumber" },
{ title: "Amount(₦)", field: "waybillInvoiceTotalAmount" },
{ title: "Staff Requesting", field: "sellerRequesting.sellerFullName" },
{ title: "Shop", field: "sellerRequesting.shop.shopName" },
{ title: "Date Requested", field: "createdDate" },
{ title: "Shipped", field: "isWaybillShipped", render: props => props.isWaybillShipped ? <CheckOutlined /> : <CloseOutlined /> },
{ title: "Date Shipped", field: "dateShipped", render: props => props.dateShipped ? props.dateShipped : "Not Shipped" },
{ title: "Received", field: "isWaybillReceived", render: props => props.isWaybillReceived ? <CheckOutlined /> : <CloseOutlined /> },
{ title: "Date Received", field: "dateReceived", render: props => props.dateShipped ? props.dateShipped : "Not Received" },
{ title: "Staff Issuing", field: "sellerIssuing.sellerFullName", render: props => props.sellerIssuing ? props.sellerIssuing.sellerFullName : "NIL" },
{ title: "Warehouse", field: "sellerIssuing.warehouse.warehouseName", render: props => props.sellerIssuing && props.sellerIssuing.warehouse ? props.sellerIssuing.warehouse.warehouseName : "NIL" },
]}
data={query => new Promise((resolve, reject) => {
Axios
.get(`${baseURL}/wareBill/byWarehouse?warehouseId=${props.selectedWarehouse.warehouseId}&page=${query.page + 1}&size=${query.pageSize}`)
.then(res => {
res.data.content.map(value => {
value.waybillInvoiceTotalAmount = moneyFormater(value.waybillInvoiceTotalAmount)
return value;
})
resolve({
data: res.data.content,
page: res.data.currPage - 1,
totalCount: res.data.totalNumberOfData,
})
})
.catch(err => {
if (!err.response) return reject(error("Error", "topRight", "Oops... An Error Occured"));
return reject("Error", "topRight", err.response.data.message ? err.response.data.message : "Oops... An Error Occured")
});
})}
editable={{
onRowDelete: oldData => new Promise((resolve, reject) => {
props.deleteWarebillRequest(oldData.waybillInvoiceId).then(value => {
success("Success", "topRight", `${oldData.waybillInvoiceNumber} Deleted Successfully`)
resolve()
}).catch(err => {
if (!err) return reject(error("Error", "topRight", "Oops... An error occured"));
error("Error", "topRight", err.data.message ? err.data.message : "Oops... An error occured")
reject()
})
})
}}
actions={[
{
icon: tableIcons.RefreshOutlined,
onClick: () => tableRef.current && tableRef.current.onQueryChange(),
isFreeAction: true,
tooltip: "Refresh"
},
rowData => rowData.length > 1 ? null : ({
icon: tableIcons.Visibility,
tooltip: "View",
onClick: view
}),
rowData => rowData.length < 2 ? null : ({
icon: "delete",
tooltip: "Delete Multiply",
onClick: () => {
const ids = rowData.map(value => value.waybillInvoiceId).join(",");
deleteWarebill(ids)
}
})
]}
options={{
search: false,
selection: true,
pageSize: 5,
pageSizeOptions: [5, 10, 20, 30, 40]
}}
/>
</Col>
</Row>
<Modal width={700} handleCancel={() => setStocksShipped([])} isOpen={!!stocksShipped.length} title="Stocks Waybilled" wantFooter={true}>
<Row style={{ maxHeight: "250px", overflowY: "scroll" }} className="justify-content-center">
<Col md="12" className="mb-5 mt-2">
<Table id="tabel2" hover bordered striped responsive size="sm" className="table-outline mb-0 d-sm-table" style={{ "minWidth": "40%", "textTransform": "capitalize" }}>
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Quantity Waybilled</th>
</tr>
</thead>
<tbody>
{
stocksShipped.length && stocksShipped.map((value, index) =>
<tr key={index}>
<td>{value.stockName}</td>
<td>{value.stockCategory}</td>
<td>{value.quantityWaybilled}</td>
</tr>
)
}
</tbody>
</Table>
</Col>
</Row>
</Modal>
</div>
</DocumentTitle>
)
}
const mapstateToProps = state => ({
selectedWarehouse: state.warehouses.selectedWarehouse
})
export default connect(mapstateToProps, { getWarehouses, getAllWarebillRequests, deleteWarebillRequest })(IsAdmin(AdminViewWareBill));
已编辑以添加实际组件
答案 0 :(得分：0)
我遇到了同样的错误。就我而言，我只是返回一个固定对象 data 函数：
{
data: [],
page: 1,
totalCount: 0
}
然后我改成
{
data: [],
page: 0,
totalCount: 0
}
并且错误消失了。所以看起来如果你尝试访问一个没有行的页面，它会抛出这个错误。