React子组件不更新

Question

代码如下：

<If condition={show}>
  <div>一些静态内容</div>
  <FixDataModal visible={visible} cancel={setUnvisible} confirm={setUnvisible} />
</If>

其中，show是个常量，visible是一个自定义hook，控制自定义弹层的显隐。
问题描述：当我将弹层放到div里时，不能正常关闭弹层，父组件中visible确认被更新了，但没有触发弹层组件的更新。放在div外面时却能正常更新。

Answer 1

本次回答借鉴于GPT
这是由React的Render阻塞导致的。当Modal被Render在condition为true的div内部时:

1. 第一次Render时,show为true,div和Modal都被Render。
2. 调用setUnvisible,将visible设置为false,触发React重新Render。
3. 但是,此时condition={show}为true,所以div内部的内容不会重新Render。
4. 虽然setState更新了visible,但Modal依然Render在div内,未获取到最新visible的值。
5. 导致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 并不会随之更新。解决方法是:

1. 将 modal 提取出 div 外部。
2. 为 div 添加唯一 key 值,让 React 视其为新的 elemnt 进行完整 Render。

望采纳！