React登录模态框仅能打开一次的问题求助

你的问题核心在于模态框关闭时未同步更新父组件状态：当点击关闭按钮时，子组件SignInModal仅修改了本地的isOpen状态，但父组件的showSignInModal仍保持为true。后续再次点击登录按钮时，父组件执行setShowSignInModal(true)，但由于状态值未发生变化（原本就是true），子组件的useEffect不会触发，导致isOpen仍为false，模态框无法再次打开。

修复方案 #

步骤1：给子组件添加状态回调Props

修改SignInModal组件，接收父组件传递的回调函数，在关闭模态框时同步更新父组件状态：

import { Modal } from "components/Modal";
import React, { useState, useEffect } from "react";

// 定义Props类型，替代any提升类型安全
interface SignInModalProps {
  showSignInModal: boolean;
  onClose: () => void;
}

export default function SignInModal(props: SignInModalProps) {
  const { showSignInModal, onClose } = props;
  const [isOpen, setIsOpen] = useState(showSignInModal);

  useEffect(() => {
    setIsOpen(showSignInModal);
  }, [showSignInModal]);

  return (
    <div>
      <Modal
        isOpen={isOpen}
        onDismiss={() => {
          setIsOpen(false);
          // 调用父组件回调，同步更新父组件状态
          onClose();
        }}
        title=""
      >
        <div className="text-white">Hello World</div>
      </Modal>
    </div>
  );
}

步骤2：在父组件中传递回调函数

修改index.js代码，给SignInModal传递关闭回调，重置父组件的showSignInModal状态：

const [showSignInModal, setShowSignInModal] = useState(false);

function handleOpenConnect() {
  setShowSignInModal(true);
}

// 新增关闭模态框的回调函数
function handleCloseSignInModal() {
  setShowSignInModal(false);
}

return (
  <>
    <Button onClick={handleOpenConnect}>
      Sign In
    </Button>
    <SignInModal 
      showSignInModal={showSignInModal} 
      onClose={handleCloseSignInModal}
    />
  </>
);

可选优化：移除子组件本地状态 #

你可以直接使用父组件传递的showSignInModal作为模态框的isOpen值，彻底避免状态不同步问题：

import { Modal } from "components/Modal";
import React from "react";

interface SignInModalProps {
  showSignInModal: boolean;
  onClose: () => void;
}

export default function SignInModal(props: SignInModalProps) {
  const { showSignInModal, onClose } = props;

  return (
    <div>
      <Modal
        isOpen={showSignInModal}
        onDismiss={onClose}
        title=""
      >
        <div className="text-white">Hello World</div>
      </Modal>
    </div>
  );
}

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