MUI Backdrop封装为自定义Hook时open为false仍显示问题

核心问题成因 #

你的代码存在3个关键错误，直接导致Backdrop状态异常：

• 组件参数接收方式错误：React函数组件的入参是统一的props对象，你写function MyLoad(isLoading)时，形参isLoading实际拿到的是{ isLoading: 你传入的布尔值 }整个对象，对象在JS布尔判断中永远为真值，所以传给setLoading的永远是真值，Backdrop自然始终打开
• useEffect依赖写法错误：useEffect的第二个参数必须是数组，你直接传入isLoading属于非法写法，会导致副作用执行逻辑完全不符合预期
• 闭包陷阱导致日志误导：你在useEffect中调用setLoading(isLoading)后立刻打印loading，拿到的是当前作用域缓存的旧状态值（初始false），并不是更新后的真实状态，所以日志输出和实际组件状态不一致
• 额外概念误区：你封装的是可复用React组件，不是自定义Hook。自定义Hook需要以use开头，且返回值为状态/方法，不能直接返回JSX结构。

修复方案 #

你完全不需要额外的本地状态和useEffect做中转，直接解构props拿到isLoading参数绑定给Backdrop的open属性即可，从根源避免状态不同步问题：

import { CircularProgress, Backdrop } from '@mui/material';
export default function MyLoad({ isLoading }) {
  return (
    <Backdrop
      sx={{
        color: '#fff',
        zIndex: (theme) => theme.zIndex.drawer + 1,
        paddingLeft: "250px"
      }}
      open={isLoading}
    >
      <CircularProgress color="primary" />
    </Backdrop>
  );
}

父组件调用方式不需要修改，保持<MyLoad isLoading={isLoading} />即可正常运行。

如果确实有场景需要在组件内部维护loading状态，注意修正useEffect依赖为数组格式，且不要在setState后立刻读取状态（受闭包限制拿不到最新值）：

import { CircularProgress, Backdrop } from '@mui/material';
import { useEffect, useState } from 'react';
export default function MyLoad({ isLoading }) {
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    setLoading(isLoading);
  }, [isLoading]); // 依赖必须包裹在数组中
  return (
    <Backdrop
      sx={{
        color: '#fff',
        zIndex: (theme) => theme.zIndex.drawer + 1,
        paddingLeft: "250px"
      }}
      open={loading}
    >
      <CircularProgress color="primary" />
    </Backdrop>
  );
}

非必要不建议加这层中转状态，会增加状态不一致的风险，直接使用props传入的控制参数是最稳妥的实现方式。

内容的提问来源于stack exchange，提问作者Germán