React中模态框组件仅能打开一次的问题及正确实现方式

你的问题出在子组件和父组件各维护了一份模态框的状态，导致状态不同步：

• 关闭模态框时，子组件只更新了自己内部的openModal为false，但父组件的openAddJobModal还是true
• 再次点击按钮时，父组件把openAddJobModal设为true，但这个值和之前的true没有变化，子组件里监听props.open的useEffect不会触发，所以子组件的openModal依然是false，模态框打不开

把模态框的状态完全交给父组件管理，子组件只负责渲染和触发关闭事件，不要自己维护状态：

修改后的子组件 AddJobModal #

function AddJobModal(props: { open: boolean; onClose: () => void }) {
    // 去掉内部的useState和useEffect，直接用父组件传的状态和回调
    return (
        <Modal
            open={props.open}
            onClose={props.onClose}
        ></Modal>
    );
}

修改后的父组件 Main #

function Main() {
    const [openAddJobModal, setOpenAddJobModal] = useState(false);

    const showAddJobForm = () => {
        setOpenAddJobModal(true);
    };

    const closeAddJobForm = () => {
        setOpenAddJobModal(false);
    };

    return (
           <div>
                <AddJobModal 
                    open={openAddJobModal}
                    onClose={closeAddJobForm}
                ></AddJobModal>
                <Button onClick={showAddJobForm}>
                    Add Job
                </Button>
            </div>
     );
}

• 所有状态都由父组件控制，是唯一的数据源，不会出现父子状态不一致的情况
• 关闭模态框时，通过onClose回调通知父组件更新状态，此时openAddJobModal变为false
• 再次点击按钮时，openAddJobModal从false变为true，子组件的open属性变化，模态框就能正常打开

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