本次回答借鉴于GPT
这是由React的Render阻塞导致的。当Modal被Render在condition为true的div内部时:
- 第一次Render时,show为true,div和Modal都被Render。
- 调用setUnvisible,将visible设置为false,触发React重新Render。
- 但是,此时condition={show}为true,所以div内部的内容不会重新Render。
- 虽然setState更新了visible,但Modal依然Render在div内,未获取到最新visible的值。
- 导致Modal没有响应setState而关闭。解决方法有两种:1. 将Modalextract提出div外部。这是因为div内部的Render被阻塞,提出来可以在重新Render时获取最新visible值。2. 在div内添加key值。例如:
<If condition={show}>
<div key={show}>
{/* ... */}
<FixDataModal visible={visible} />
</div>
</If>
添加key值后,React会认为这是一个全新的div,不会对其子内容Render进行阻塞,Modal可以获取到最新visible值正常响应。所以,总结来说,这个问题的根源在于:当 If 条件变化时重新 Render,如果 modal 存在于 If 条件为 true 的 div 内,那么 modal 的 Props 并不会随之更新。解决方法是:
- 将 modal 提取出 div 外部。
- 为 div 添加唯一 key 值,让 React 视其为新的 elemnt 进行完整 Render。
望采纳!