React函数组件模态框关闭后需两次点击打开的问题求助

嘿，我完全懂你碰到的这个麻烦——这是因为父组件和模态框组件各自维护了独立的状态，导致两者状态不同步，才会出现需要点击两次按钮的情况。

问题根源拆解 #

你现在的父组件用openModal控制模态框是否渲染，而模态框自己又声明了isOpen状态来管理显示。当你在模态框内部点击关闭时，模态框的isOpen变成了false，但父组件的openModal还是true。这时候你点击父组件的“Open Modal”按钮：

1. 第一次点击会把openModal从true改成false，但此时模态框已经因为自身isOpen为false而隐藏了，你看不到变化；
2. 第二次点击把openModal改成true，模态框重新被渲染，并且它的初始isOpen是true，这时候才会显示出来。

解决方案：让父组件统一管理状态 #

正确的做法是把模态框的显示状态完全交给父组件控制，模态框只作为受控组件，接收父组件传递的状态和关闭回调，自己不再维护状态。

修改后的父组件代码

import React, { useState } from "react";
import { Button } from "semantic-ui-react";
import { ModalComponent } from "/imports/ui/ModalComponent";

export const MyDashboard = () => {
  const [openModal, setOpenModal] = useState(false);
  
  // 打开模态框时直接设为true，避免取反带来的状态不同步问题
  const handleOpenModal = () => {
    setOpenModal(true);
  };

  // 关闭模态框的回调，传递给子组件
  const handleCloseModal = () => {
    setOpenModal(false);
  };

  return (
    <div>
      <Button onClick={handleOpenModal} content="Open Modal" color="green" />
      {/* 不管openModal是true还是false，都渲染模态框，用open属性控制显示 */}
      <ModalComponent open={openModal} onClose={handleCloseModal} />
    </div>
  )};

修改后的模态框组件代码

import React from "react";
import { Modal, Button } from "semantic-ui-react";

// 接收父组件传递的open状态和onClose回调
export const ModalComponent = ({ open, onClose }) => {
  // 移除自己的isOpen状态，完全依赖父组件传递的参数
  return (
    <Modal 
      open={open}
      onClose={onClose} // 模态框自带的关闭事件（比如点击遮罩）也调用父组件的关闭方法
    >
      <Modal.Header>A modal is showing</Modal.Header>
      <Modal.Actions>
        <Button content="Save" color='green' onClick={onClose} />
        <Button color='black' onClick={onClose}>
          Cancel
        </Button>
      </Modal.Actions>
    </Modal>
  );
};

为什么这样能解决问题？ #

现在所有关于模态框显示的状态都由父组件统一管理：

• 点击父组件按钮时，直接把openModal设为true，模态框的open属性变成true，立刻显示；
• 点击模态框内的关闭按钮或遮罩时，调用父组件的handleCloseModal，把openModal设为false，模态框的open属性变成false，自动隐藏；
• 父子组件的状态完全同步，不会再出现“点击两次才生效”的情况。

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