src初始化占位图后，经过请求后得到的多张图片，只有最后一张可以正常显示预览

[ZhanghaoH]

"react-photo-view": "^1.2.1"，

<div className="mt-8 flex between">
          <PhotoProvider>
            <PhotoView src={compensationDetailInfo?.thirdOrdImgUrl}>
              <div className="img-container">
                <img src={compensationDetailInfo?.thirdOrdImgUrl} alt="订单图" />
              </div>
            </PhotoView>
            {/* </PhotoProvider>
            <PhotoProvider> */}
            <PhotoView src={compensationDetailInfo?.thirdFeeImgUrl}>
              <div className="img-container">
                <img src={compensationDetailInfo?.thirdFeeImgUrl} alt="明细图" />
              </div>
            </PhotoView>
          </PhotoProvider>
        </div>

代码如上图，info 是接口请求到的结果，实测只有第二张可以正常预览，页面上图片显示正常；经过几步探查发现，多张图片下依然只有最后一张图片可正常预览，如果加上默认占位图，则打开预览除了最后一张剩下都显示占位图而不是数据里的图片，如果每个图片都用provider包裹则正常，但也就失去了分组预览的意义；目前解决方案： 判断两个链接为真再去渲染provider，结果正常

[MinJieLiu]

PhotoView 必须在Provider 中，如何图片分组就需要你如何组合Provider

[ZhanghaoH]

呃，楼主似乎没明白我的问题；分组没有问题，问题是超过一张后图片的url没有及时更新，假设页面初始化是两张占位图，加载完后理想情况是预览对应图片，但实际url变化后，预览图片在上述例子中只有最后一张图片的url显示了正确的图片，其他均显示之前的占位图而非变化后的url对应的图片，总是最后一张是正确的

PhotoView 必须在Provider 中，如何图片分组就需要你如何组合Provider

[MinJieLiu]

可以提供一个可复现的例子吗

[MinJieLiu]

如果你在 PhotoView 上使用 key={图片url} 呢，看看是否还存在这个问题

[ZhanghaoH]

很神奇的现象，加上key 变三张图了，其实dom结构就是我上图copy出来的那部分，唯一依赖是两个url，初始值为空，进页面初始化请求后得到两个图片url，然后点击预览。如果渲染组件的时候url是确定，不会再变则不会有问题；我试试定时器模拟请求

[ZhanghaoH]

https://codepen.io/Zhang_hao/pen/gOmZJJM 终于知道了，用对象取键值（就是用obj?.imgUrl赋值url）会复现，如果直接是url，没问题；神奇

[MinJieLiu]

就是这个 src 可能为空，如果为空的话可以不渲染这个 PhotoView 吧，这样问题不大