material UI模态缓慢甚至崩溃

Question

我使用Reactjs创建一个表，我想做的事情是每次我点击表中的一行，一个模态会弹出，问我是否要打印这一行。我已经添加了一个模态使用材质ui对话框，但它的表现真的很糟糕，它的反应很慢，几次点击后，它会冻结应用程序，并最终崩溃。谁能指出问题出在哪里?我花了一天的时间试图解决这个问题，但仍然没有任何进展。

import React from 'react';
import {useState, setState} from 'react';
import { makeStyles } from "@material-ui/core/styles";
import styles from "assets/jss/material-dashboard-react/views/iconsStyle.js";
import MaterialTable, {MTableHeader, MTableToolbar} from 'material-table';
import Axios from 'axios';
import date from 'date-and-time';
import AlertDialog from 'components/Modal/popover';
import { useConfirm, ConfirmProvider } from 'material-ui-confirm';
/**
* Date Calculation
*/
const useStyles = makeStyles((theme)=>({
...styles,
typography: {
padding: theme.spacing(2),
},
paper: {
position: 'absolute',
width: 400,
backgroundColor: theme.palette.background.paper,
border: '2px solid #000',
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));


//FUNCTION: Generates todays date and the requested picking terminal date in pacific time
//OUTPUT: Todays date and the requested date for picking terminal   
function ImportantDates(){
var today = new Date(); 
// var year = today.getFullYear();
// var Month = today.getMonth()+ 1; //getMonth() can return 0, so +1 is needed.
// var Day = today.getDate();
const now = new Date();
const day = date.format(now, 'YYYY-MM-DD');
//Get todays date and convert UTC to Pacific
//Determine the start date day of the week
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var dayOfWeek = weekday[today.getDay()];
//Monday through Wednesday
var leapDay = 3;
if(dayOfWeek === "Wednesday"){
leapDay = 5;
}
//Skip the weekends
if(dayOfWeek === "Sunday"){
leapDay = 4;
}
if(dayOfWeek === "Saturday"){
leapDay = 4;
}
if((dayOfWeek === "Thursday") || (dayOfWeek === "Friday")){
leapDay = 5;
}
//How far ahead the picking terminal is looking
var date_ = date.addDays(now, leapDay);
date_ = date.format(date_, 'YYYY-MM-DD');
var dates ={
"today": day,
"requested": date_,
}
return dates;
}

// query for picking terminal 
function getQuery(){
const date = ImportantDates();
const requested = date['requested'];
const query = 
`SELECT  work_orders.WOID, work_orders.endDate, work_orders.printed,
work_orders.quantity, 
work_orders.expedite, 
work_orders.buildable,
work_orders.startDate,
work_orders.orderStatus,
work_orders.createdDate,
work_orders.productionLine, 
work_orders.estTotalRunTime,
work_orders.productionNotes,
work_orders.productionStatus, 

sales_orders.SOID,
sales_orders.shipDate, 

parts.partName, 
parts.partDescription,

customers.CID,
customers.customerName


FROM work_orders 

LEFT JOIN sales_orders 
ON work_orders.internalId  = sales_orders.internalId 

LEFT JOIN parts 
ON work_orders.partId  = parts.partId 

LEFT JOIN customers 
ON sales_orders.CID  = customers.CID
WHERE orderStatus = 'Released' AND productionStatus = 'Approved' AND startDate <= '${requested}'
ORDER BY expedite DESC, startDate ASC, shipDate IS NULL, shipDate ASC, createdDate ASC, SOID ASC`
return query;
}

export default function PickingTerminal(props){
const classes = useStyles();
const [columns, setColumns] = useState([
{ title: 'Printed', field: 'printed'},
{ title: 'Start Date', field: 'startDate', },
{ title: 'Pordcution Line', field: 'productionLine', },
{ title: 'Work Order', field: 'WOID', type: 'numeric'},
{ title: 'Part Name', field: 'partName', },
{ title: 'Quantity', field: 'quantity', type: 'numeric'},
{ title: 'Customer', field: 'customerName', },
{title: 'Ship Date', field: 'shipDate'},
{ title: 'Production Status', field: 'productionStatus', },
]);
const [work_orders, setWO] = useState([]);
const [open, setOpen] = React.useState(false);

const getData =()=>{
var query = {
'query' : getQuery()
}
var url =  'http://10.2.1.202:8000/api/pickingterminal?';
Axios.post(url , query).then(result=>{
console.log(result.data);
setWO(result.data);
})
}
React.useEffect(()=>{
getData();
console.log(work_orders);
},[]);  
const setColor=(rowData)=>{
if(rowData['buildable'] < rowData['quantity']){
return '#E52B50';
}
else if(rowData['expedite'] > 0){
return '#FF7E00';
}
else if(rowData['productionNotes'].includes('RMA')){
return 'green';
}
else if(rowData['productionNotes'].includes('NEW BUILD')){
return 'deeppink';
}
return '#FFF';
}

const printItem=(rowData)=>{
console.log(rowData);
}

const confirm = useConfirm();
const handleShow = () => {
setOpen(true);
// console.log("handle show: " + open);
};

const handleClose = () => {
setOpen(false);
console.log("handle show: " + open);
};
return(
<div>
<MaterialTable
options={{
sorting: true,
filtering: false,
search: true,
exportButton: true,
pageSize: 100,
pageSizeOptions: [25, 50, 100, 150],
thirdSortClick: true,
initialPage: 0,
debounceInterval: 500,
paging: true,
rowStyle: rowData=>({
backgroundColor: setColor(rowData)
})
}}

onRowClick={(selectedRow) => handleShow()}
columns={columns}
data={work_orders}
title="Work Orders"
/>
<AlertDialog 
open={open}
handleClose={handleClose} />
</div>

);

}

import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
export default function AlertDialog(props) {
const [open, setOpen] = React.useState(props.open);
const handleClose = () => {
console.log('in change');
props.handleClose();
};
return (
<div>
<Dialog
open={props.open}
onClose={props.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={props.handleClose} color="primary">
Disagree
</Button>
<Button onClick={props.handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}

Answer 1

作为对话框的打开和关闭状态，而且处理程序是由父组件创建和控制的，所以不要在模态中使用state和function。只需要提取道具并将其传递给模态。

import React from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
export default function AlertDialog(props) {
return (
<div>
<Dialog
open={props.open}
onClose={props.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={props.handleClose} color="primary">
Disagree
</Button>
<Button onClick={props.handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}