我最近在显示错误消息时遇到了麻烦,我试图在出现错误时打开一个模态,但我在操作上遇到了麻烦,我试图将其作为错误边界,但没有成功,目前,我在主页元素中有模态,但不幸的是,handleOpen不起作用,如果有人可以格式化代码,使其起作用,并向我解释为什么它没有摆在首位,这将是美妙的,我的进步作为一个开发人员
代码:
// modal defining
const [open, setOpen] = useState(false);
// modal closing
const handleClose = () => {
setOpen(false);
}
// modal opening
const handleOpen = () => {
setOpen(true);
}
//file data being saved
const [fileData, setFileData] = useState<any>();
// first checks if the columns have names, then checks if they are containing id and name
const handleFileData = (data: Array<any>) => {
for (let index = 0; index < data[0].length; index++) {
if (data[0][index] == null) { return (HOMEPAGE) }
}
for (let index = 0; index < data[0].length; index++) {
if (data[0][index].includes("id"), data[0][index].includes("name")) { setFileData(data); }
}
}
// Routing Element
const isData = () => {
if (fileData !== undefined) {
return <MainPage Data={fileData}></MainPage>
}
else {
return (HOMEPAGE);
}
};
// error message
const ModalComp = (
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box className='Modal'>
<Typography id="modal-modal-title" variant="h6" component="h2">
problem </Typography>
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
alert
<br /> <br />
alert </Typography>
</Box>
</Modal>
);
// Home Page Element
const HOMEPAGE = (
<div className="App">
<h1 className='H1'>Interface</h1>
<InputPart handleFileData={handleFileData}></InputPart>
{ModalComp}
</div>
);
//Browser Router.
return (
<BrowserRouter>
<Routes>
<Route path="/" element={HOMEPAGE}></Route>
<Route path="/main" element={isData()}></Route>
</Routes>
</BrowserRouter>
);
}
export default App;
字符串
我无法找到一种方法来打开模态时,有一个错误,如果你能告诉在哪里,请让我知道,提前感谢。
1条答案
按热度按时间pzfprimi1#
最初在您的状态下,您在此处将
open
定义为false
:const [open, setOpen] = useState(false);
,在你的modal中,你有一个open asopen={open}
,它是false,所以modal没有显示。因此,当你想触发错误并显示模态时,你必须调用函数handleOpen
,该函数将模态的状态设置为true,它将强制模态重新呈现,因为它的状态发生了变化,属性open={open}
将变为true,向你显示模态。在您的代码中,您似乎没有在任何地方调用
handleOpen
,您只是试图呈现Homepage