React中useState更新不生效求助：Modal无法正常关闭

问题概述 #

实现受控Modal组件时，通过外部visible状态控制显示，但调用关闭函数后Modal未关闭，setState未触发预期的状态更新，日志显示visible对象未发生变化。

核心原因 #

问题源于过时闭包（Stale Closure）：

• close函数使用useCallback包裹，但依赖项数组为空[]，导致函数内部始终引用组件初始化时的visible值（即{ m1: false, m2: false, m3: false }）。
• 当打开Modal后，visible已更新为{ m1: true, ... }，此时调用close，函数内基于旧的visible生成新状态{ ...初始visible, m1: false }，该状态与初始状态完全一致。
• React在处理状态更新时，会对比新旧状态的内容与引用，因新状态内容未发生有效变化，不会触发组件重渲染，导致Modal无法关闭。

修复方案 #

方案1：修复useCallback依赖项 #

将visible添加到useCallback的依赖数组中，确保函数能捕获最新的状态值：

const close = useCallback(() => {
  const s = { ...visible, m1: false };
  console.log("should be: ", s);
  setVisible(s);
}, [visible]); // 添加visible作为依赖

方案2：使用函数式更新（推荐） #

当新状态依赖旧状态时，使用setState的函数式写法，直接获取最新的状态快照，彻底避免闭包问题：

const close = useCallback(() => {
  setVisible(prevVisible => {
    const updatedState = { ...prevVisible, m1: false };
    console.log("should be: ", updatedState);
    return updatedState;
  });
}, []); // 无需依赖visible，通过prevVisible获取最新状态

同时，按钮的打开逻辑也建议改为函数式更新，保持一致性：

<button
  onClick={() => {
    setVisible(prevVisible => ({ ...prevVisible, m1: true }));
  }}
>

完整修复代码 #

export default function () {
  const [visible, setVisible] = useState(() => ({
    m1: false,
    m2: false,
    m3: false
  }));

  const close = useCallback(() => {
    setVisible(prevVisible => {
      const updatedState = { ...prevVisible, m1: false };
      console.log("should be: ", updatedState);
      return updatedState;
    });
  }, []);

  useEffect(() => {
    console.log("newVal: ", visible);
  }, [visible]);

  const props = {
    components: [
      {
        component: (
          <button
            onClick={() => {
              setVisible(prevVisible => ({ ...prevVisible, m1: true }));
            }}
          >
            open Modal1
            <Modal visible={visible.m1} close={close}>
              this is a modal
            </Modal>
          </button>
        )
      }
    ]
  };

  return <IntroComponent {...props} />;
}

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