如何解决MUI Dialog内容随父组件状态变更不重新渲染问题

问题 #

使用MUI Dialog的content属性时，父组件状态变更后模态框内容并未重新渲染。UploadModal组件中的fileCount始终不更新，我通过父组件传递props实现模态框动态渲染，需要解决这个问题。

代码示例 #

const Home = () => {
    const { modal, openModal } = useModal();
    const [fileCount, setFileCount] = useState(0);

    const uploadFile = (file) => {
        // 模拟接口请求
        setFileCount(fileCount+1)
        console.log("File uploaded");
    };

    return (
        <Stack>
            <Typography>Home</Typography>
            <Button
                onClick={() =>
                    openModal("UploadModal", { title: "avatar", uploadFile, fileCount })
                }
                variant="contained"
            >
                Upload avatar
            </Button>
        </Stack>
    );
}

//UploadModal.js
const UploadModal = ({ onClose, title, uploadFile, fileCount }) => {
    return (
        <Dialog open fullWidth onClose={onClose}>
            <Stack p={3}>
                <Typography>Upload {title} </Typography>
                <Typography>File count {fileCount } </Typography>
                <Button onClick={uploadFile} variant="contained">
                  Upload
                </Button>
            </Stack>
        </Dialog>
    );
};

解决方法 #

问题根源 #

当前实现中，openModal调用时传递的fileCount和uploadFile是点击按钮瞬间的快照，后续父组件fileCount更新时，这些props不会自动同步到模态框组件中。另外setFileCount(fileCount+1)存在闭包问题，可能导致无法正确获取最新state值。

修复方案 #

方案1：直接在父组件中渲染模态框（推荐）

放弃通过useModal动态注册组件的方式，直接在Home组件中渲染UploadModal，用state控制显示/隐藏。这样props会随父组件state变化自动同步：

const Home = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [fileCount, setFileCount] = useState(0);

  // 用函数式更新避免闭包问题
  const uploadFile = () => {
    // 模拟接口请求
    setFileCount(prevCount => prevCount + 1);
    console.log("File uploaded");
  };

  return (
    <Stack>
      <Typography>Home</Typography>
      <Button
        onClick={() => setIsModalOpen(true)}
        variant="contained"
      >
        Upload avatar
      </Button>
      {/* 直接渲染模态框，通过state控制显示 */}
      <UploadModal
        open={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        title="avatar"
        uploadFile={uploadFile}
        fileCount={fileCount}
      />
    </Stack>
  );
};

方案2：改进useModal的props同步逻辑

如果必须保留useModal的动态调用方式，需要修改useModal的实现：

1. 在useModal中用useRef存储当前props，或用useState维护props状态；
2. 提供一个更新props的方法，在父组件fileCount变化时调用该方法同步最新props；
3. 同时将uploadFile中的setFileCount改为函数式更新，避免闭包导致的旧值问题。

关键注意点 #

• 始终用函数式更新处理依赖前一次state的更新：setFileCount(prev => prev + 1)，确保每次都基于最新的state值计算；
• 若使用动态模态框管理工具，必须确保工具支持props的动态更新，否则无法同步父组件的状态变化。

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