从兄弟组件调用prop函数仅触发一次问题排查

数据老陈

2026-6-18

解决跨组件调用模态框仅能触发一次的问题

问题原因

当前代码中点击Two组件的「Open Modal」按钮仅能打开一次One组件的模态框，核心问题在于：

App组件的modal状态被设为true后，没有重置为false
One组件的useEffect仅在modal状态变化时触发，后续点击按钮时modal始终为true，无法触发useEffect更新open状态，导致模态框无法再次打开

解决方案

通过在One组件关闭模态框时，通知App组件重置modal状态，确保下次点击按钮时modal能从false变为true，触发useEffect更新open状态。

修改后的代码

App组件：添加关闭模态框的回调函数并传递给One组件

function App() {
  let [modal, setModal] = useState(false)
  
  const handleModalClose = () => {
    setModal(false)
  }

  return (
    <div className="App">                      
      <div>
        <One modal={modal} onCloseModal={handleModalClose}/>
        <Two onModal={setModal}/>
      </div>
    </div>
  )
}

One组件：在关闭模态框时调用回调函数重置App的modal状态

export function One({modal, onCloseModal}) {
  let [open, setOpen] = useState(false)
  
  useEffect(() => {
    setOpen(modal)
  }, [modal])

  const openModal = () => {
    setOpen(true)
  }
  
  const closeModal = () => {
    setOpen(false)
    onCloseModal() // 通知App重置modal状态
  }

  return (
  <> 
    <div>
      <button onClick={openModal}>Create</button>
      {open && <div>MODAL WINDOW<br /><br /><br /><span onClick={closeModal}>CLOSE</span></div>}
    </div>   
  </>
  )
}