React项目中MUI Modal的useEffect副作用提前执行问题

问题原因 #

你的MyModal组件只要被父组件渲染（哪怕isModalVisible为false）就会完成挂载，此时空依赖的useEffect会立即触发。而Material-UI的Modal在open为false时只是隐藏DOM，并不会卸载组件，所以副作用会在Modal实际显示前就执行。

解决方案 #

方案1：依赖isModalVisible控制副作用执行时机

把isModalVisible加入useEffect的依赖数组，仅当Modal打开时执行副作用：

import React, { useEffect } from "react";
import { Modal } from '@material-ui/core';

const MyModal = ({ sideFunction, isModalVisible, closeModal }) => {
    useEffect(() => {
        if (isModalVisible) {
            sideFunction();
        }
    }, [isModalVisible, sideFunction]);
    
    return (
        <Modal open={isModalVisible} onClose={closeModal}>
            <div>MODAL</div>
        </Modal>
    );
}

• 若sideFunction是父组件传递的函数，建议在父组件用useCallback包裹，避免因函数引用变化导致不必要的副作用触发。

方案2：利用Modal内置的onEntered回调

Material-UI的Modal提供了过渡回调onEntered，会在Modal完全显示（动画完成）后触发，完美匹配“Modal渲染后执行副作用”的需求：

import React from "react";
import { Modal } from '@material-ui/core';

const MyModal = ({ sideFunction, isModalVisible, closeModal }) => {
    const handleModalEntered = () => {
        sideFunction();
    };
    
    return (
        <Modal 
            open={isModalVisible} 
            onClose={closeModal}
            onEntered={handleModalEntered}
        >
            <div>MODAL</div>
        </Modal>
    );
}

方案3：条件渲染MyModal组件

在父组件中仅当isModalVisible为true时才渲染MyModal，这样组件挂载时机就是Modal要显示的时机，空依赖的useEffect会和Modal渲染同步执行：

// 父组件代码片段
{isModalVisible && (
    <MyModal 
        sideFunction={yourSideFunction} 
        isModalVisible={isModalVisible} 
        closeModal={closeModal}
    />
)}

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