反应不关闭对话框

Question

我使用 materialUI 单击菜单项，然后打开一个对话框（子组件），但是在对话框打开后它似乎不会关闭并且不会更新noticeModal的数据。 没有抛出任何错误，我相信这与使用useEffect为初始 state 设置setNoticeModal(props.open)有关。 我已经尝试删除useEffect()并将props.open扔到默认的noticeModal useDate()中，但是在这样做之后，我的对话框将不再打开。 我在这里看什么？

假日设置.js

    ...  
    const [dialogOpen, setDialogOpen] = React.useState(false);  
    const handleDialogOpen = (dataElement) => {
      setDialogData(dataElement);
      setDialogOpen(true);
      setOpen(false);
    }

    ...
    <ClickAwayListener onClickAway={handleClose}>
       <MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
          <MenuItem onClick={handleDialogOpen}>Add Holiday</MenuItem>
        </MenuList>
     </ClickAwayListener>

    ...

    <div className="card-body">
      <div className="row">
         <div className="text-left col-12">
            <Styles>
               <Table columns={columns} data={data} />
               <HolidayDialog open={dialogOpen} onClose={handleDialogClose} data={dialogData}/>
            </Styles>
         </div>
       </div>
     </div>
    ...

假日对话.js

const HolidayDialog = (props) => {
    const [noticeModal, setNoticeModal] = useState(false);
    const [selectedDate, setSelectedDate] = useState(new Date());
    const [holidayData, setHolidayData] = useState(props.data);

    useEffect(() => {
        setNoticeModal(props.open)
    });

    const handleDateChange = (date) => {
        setSelectedDate(date);
    };

    const handleClose = () => {
        setNoticeModal(false);
        console.log(noticeModal);
    };

    const handleChange = (e) => {
        const { name, checked } = e.target;
        setHolidayData((prevState) => ({ ...prevState, [name]: checked }));
      };

    const updateValues = (e) => {
        const { name, value } = e.target;
        setHolidayData((prevState) => ({ ...prevState, [name]: value }));
    }
    return (
        <Dialog
            open={noticeModal}
            TransitionComponent={Transition}
            keepMounted
            onClose={handleClose}
            aria-labelledby="notice-modal-slide-title"
            aria-describedby="notice-modal-slide-description"
        >
            <DialogTitle id="customized-dialog-title" onClose={handleClose}>
                {holidayData.HolidayName ? holidayData.HolidayName : 'Create New Holiday'}
            </DialogTitle>
            <DialogContent dividers>
                <form noValidate autoComplete="off">
                    <div className="row">
                        <div className="col">
                            <TextField required name="HolidayName" id="outlined-basic" label="Holiday Name" variant="outlined" onChange={updateValues} value={holidayData.HolidayName || ''}/>
                        </div>
                        <div className="col">
                            <TextField id="outlined-basic" name="Branch" label="Branch" variant="outlined" onChange={updateValues} value={holidayData.Branch || 'ALL'}/>
                        </div>
                    </div>
                    <div className="row mt-3">
                        <div className="col">
                        <MuiPickersUtilsProvider utils={DateFnsUtils}>
                            <KeyboardDatePicker
                                disableToolbar
                                variant="inline"
                                format="MM/dd/yyyy"
                                margin="normal"
                                id="date-picker-inline"
                                label="Date picker inline"
                                value={selectedDate}
                                onChange={handleDateChange}
                                KeyboardButtonProps={{
                                    'aria-label': 'change date',
                                }}
                            />
                        </MuiPickersUtilsProvider>
                        </div>
                        <div className="col">
                            <TextField id="outlined-basic" name="Hours" label="Hours" variant="outlined" onChange={updateValues} value={holidayData.Hours || 'Closed'}/>
                        </div>
                    </div>
                    <div className="row mt-3">
                        <div className="col d-flex flex-column">
                            <FormControlLabel
                                control={
                                <Checkbox
                                    checked={holidayData.Web || false}
                                    value={holidayData.Web}
                                    onChange={handleChange}
                                    name="Web"
                                    color="primary"
                                />
                                }
                                label="Show on Web?"
                            />
                            <FormControlLabel
                                control={
                                <Checkbox
                                    checked={holidayData.CoOp || false}
                                    value={holidayData.CoOp}
                                    onChange={handleChange}
                                    name="CoOp"
                                    color="primary"
                                />
                                }
                                label="CoOp Holiday?"
                            />
                        </div>
                        <div className="col d-flex flex-column">
                            <FormControlLabel
                                control={
                                <Checkbox
                                    checked={holidayData.Phone || false}
                                    value={holidayData.Phone}
                                    onChange={handleChange}
                                    name="Phone"
                                    color="primary"
                                />
                                }
                                label="Use in IVR?"
                            />
                            <FormControlLabel
                                control={
                                <Checkbox
                                    checked={holidayData.Active || true}
                                    value={holidayData.Active}
                                    onChange={handleChange}
                                    disabled 
                                    name="Active"
                                    color="primary"
                                />
                                }
                                label="Active"
                            />
                        </div>
                    </div>
                </form>
            </DialogContent>
            <DialogActions>
                <Button autoFocus onClick={handleClose} color="default">
                    Cancel
                </Button>
                <Button autoFocus onClick={handleClose} color="primary">
                    Create Holiday
                </Button>
            </DialogActions>
        </Dialog>
    )
}

export default HolidayDialog;

Answer 1

你能试试这个吗？

我假设props.onClose在父级（ holidaySettings ）上将 dialogOpen 设置为false

 const handleClose = () => {
       props.onClose()
    };

如果props.onClose没有在父级（ holidaySettings ）上将dialogOpen设置为false 。您可以添加将dialogOpen设置为 false 的 close 属性。

     <HolidayDialog open={dialogOpen} close={()=>setDialogOpen(false);} onClose={handleDialogClose} data={dialogData}/>

      const handleClose = () => {
           props.close()
        };

并将props.open传递给 Dialog

<Dialog
  open={props.open}
/>

Answer 2

您没有为useEffect提供任何依赖项，因此它在每次重新渲染时都会运行。 在您的 useEffect 中，您正在切换模式并因此切换问题。

useEffect(() => {
        setNoticeModal(props.open) 
    });//<---- issue - missing dependency

解决方案 - 将依赖项作为props.open传递。 这使得 useEffect 仅在 props.open 更改时运行。

useEffect(() => {
        setNoticeModal(props.open) 
    }, [props.open]); //<----- props.open

Answer 3

在 useEffect 中，您将noticeModal值重置为props.open ，我认为这是真的吗？

我相信您要做的是设置noticeModal的初始值。 尝试更改为下面的代码并删除 useEffect

const [noticeModal, setNoticeModal] = useState(props.open);