React MaterialUI Modal状态更新后UI未实时刷新问题

问题表现 #

• 初始Modal状态：
• 选中下拉值后UI未同步更新：（重新展开下拉可看到选项实际已选中）
• 核心异常：Modal内嵌下拉选择、DateTimePicker、多行文本输入等表单字段，操作表单后绑定的schedule状态值已更新，组件也触发重渲染，但Modal内显示内容未同步；只有关闭重开Modal后，更新值才会正确显示。相同表单逻辑放在Modal外部可正常运行，无法定位是否为自定义BaseModal组件的实现问题。

问题根因 #

异常和BaseModal组件本身实现无关，核心错误是将React JSX节点存入state管理：
handleSelectDate触发时，整个表单JSX被一次性存入modalBody状态，这份JSX闭包捕获的是节点生成瞬间的schedule状态值。后续schedule更新触发组件重渲染时，modalBody状态里存储的仍是旧闭包生成的节点，无法获取最新状态值，自然不会同步更新UI；只有关闭重开Modal时，才会重新调用setModalBody生成新JSX节点，捕获到最新的schedule值，因此重开后显示正常。
代码中还存在一个附带逻辑bug：toggleModal={() => setModalOpen(isModalOpen)}始终将状态设置为当前已有值，无法正常触发Modal关闭。

修复方案 #

1. 修正BaseModal组件写法，使用标准children属性传递内容 #

不要通过body prop传递预生成的节点，改用React通用的children属性接收子内容，同时修正toggleModal的类型定义：

declare interface IBaseModal {
    readonly sx: BaseModalStyle;
    readonly isOpen: boolean;
    readonly toggleModal: () => void;
    readonly children?: React.ReactNode;
}

const BaseModal: FC<IBaseModal> = ({sx, children, isOpen, toggleModal}: IBaseModal) => (
    <Modal open={isOpen} onClose={toggleModal}>
        <BaseModalView width={sx.width} height={sx.height}>
            {children}
        </BaseModalView>
    </Modal>
)

2. 移除冗余的modalBody状态，直接在渲染阶段输出表单内容 #

state仅用于存储纯数据，视图JSX直接写在组件渲染逻辑中，依托React响应式机制自动同步更新，禁止将JSX节点存入state。
删除const [modalBody, setModalBody] = useState<React.ReactNode | undefined>();状态定义，将原表单JSX直接作为BaseModal的子元素渲染，同时修复toggleModal的状态更新逻辑：

<BaseModal
    sx={{width: 800, height: 600}}
    isOpen={isModalOpen}
    toggleModal={() => setModalOpen(prev => !prev)}
>
    <Grid container>
        <Grid item xs={6}>
            <Grid container direction="row" sx={{padding: 2}}>
                <Grid item xs={12} sx={{marginBottom: 2}}>
                    <Typography variant="h5" align='center'>
                        Schedule your Post
                    </Typography>
                </Grid>
                <Grid item xs={12} sx={{marginBottom: 2}}>
                    <Divider/>
                </Grid>
                <Grid item xs={12} paddingBottom={3}>
                    <TextField
                        style={{marginBottom: 20}}
                        fullWidth
                        select
                        variant="outlined"
                        label="Plattform"
                        value={schedule.platform}
                        onChange={e => setSchedule(prevState => ({...prevState, platform: e.target.value}))}
                    >
                        {availableSocialMedias.map(item => (
                            <MenuItem key={item.socialMedia} value={item.socialMedia}>{item.socialMedia}</MenuItem>
                        ))}
                    </TextField>

                    <LocalizationProvider dateAdapter={AdapterDateFns}>
                        <DateTimePicker
                            renderInput={(props) => <TextField {...props} />}
                            label="Schedule Date and Time"
                            value={schedule.schedule.start}
                            onChange={(e) => {
                                setSchedule(prevState =>  ({...prevState, schedule: {
                                        ...prevState.schedule, start: e!
                                    }}))
                            }}
                        />
                    </LocalizationProvider>
                    <TextField
                        fullWidth
                        margin="dense"
                        multiline
                        rows="5"
                        variant="outlined"
                        label="Post Content"
                        id="additional-info"
                        value={schedule.schedule.desc}
                        onChange={(e) => {
                            setSchedule(prevState =>  ({...prevState, schedule: {
                                    ...prevState.schedule, desc: e.target.value
                                }}))
                        }}
                    />
                </Grid>
                <Grid item xs={12} sx={{width: '100%'}}>
                    <Stack spacing={2} direction="row" justifyContent='center'>
                        <Button variant='contained' onClick={() => createEvent()}>Post</Button>
                        <Button variant='contained' onClick={() => handleCloseModal()}>Close</Button>
                    </Stack>
                </Grid>
            </Grid>
        </Grid>
        <Grid item xs={6} sx={{backgroundColor: '#F7706EFF', justifyContent: 'center'}}>
            <img style={{height: 250, width: 400}}
                 src="https://web-static.wrike.com/blog/content/uploads/2020/01/Five-Features-of-a-Good-Monthly-Employee-Work-Schedule-Template.jpg?av=718acbc1e2b21264368f12b5cc57c0e2"/>
            <img style={{height: 250, width: 400}}
                 src="https://imageio.forbes.com/specials-images/imageserve/605e039657de8844e59d9140/Businesswoman-Planning-Schedule-Using-Calendar-And-Laptop/0x0.jpg?format=jpg&crop=922,615,x0,y0,safe&width=960"/>
            <Typography align='center' variant='h6'>
                Schedule for the whole week!
            </Typography>
        </Grid>
    </Grid>
</BaseModal>

3. 精简日期选择触发逻辑 #

handleSelectDate中移除setModalBody调用，仅保留状态初始化、Modal打开逻辑即可：

const handleSelectDate = (e: SlotInfo) => {
    // 按需初始化schedule默认值
    setSchedule(prev => ({
        ...prev,
        schedule: {
            ...prev.schedule,
            start: e.start
        }
    }))
    setModalOpen(true);
}

内容的提问来源于stack exchange，提问作者Terraya