React JS -如何更新图像只有一次加载?

Question

我有一个React应用程序，从EventSource接收图像uri流。我想显示最新的图像，只有替换图像一旦下一个图像是完全加载的，可以立即显示。我该如何做到这一点?

编辑2:我目前的实现完全做到了这一点，除了一个关键组件:最近的图像在加载时显示，改变页面的垂直排列。

编辑:添加相关代码片段，这是我的EventSource:

useEffect(() => {
let serverImageURIsEventSource = new EventSource(
url,
{withCredentials: false})
serverImageURIsEventSource.addEventListener('open', () => {
console.log('SSE opened!');
});
serverImageURIsEventSource.addEventListener('message', (e) => {
console.log(e.data);
setImageURIs([e.data]);  // e.data is a string to the image URI
});
serverImageURIsEventSource.addEventListener('error', (e) => {
console.error('Error: ',  e);
});
serverImageURIsEventSource.addEventListener('close', () => {
console.log('SSE closed!');
serverImageURIsEventSource.close();
});
return () => {
serverImageURIsEventSource.close();
};
}, [prompt]);

这是我的JSX和图像。

<ImageList cols={1}>
{imageURIs.map((imageURI) => (
<ImageListItem key={imageURI}>
<img
src={`${imageURI}`}
srcSet={`${imageURI}`}
loading="lazy"
// loading="eager"  default
/>
</ImageListItem>
))}
</ImageList>

Answer 1

使imageURIs作为对象数组而不是数组，并分配一个数字道具作为您的参考，以便在渲染时对其进行排序。

setImageURIs(prevImageUris => [...prevImageUris, {uri: e.data, number: prevImageUris.length + 1}])

在渲染 时使用sort

{imageURIs.sort((a,b) => b.number - a.number).map((imageURI) => (
<ImageListItem key={imageURI.uri}>
<img
src={`${imageURI.uri}`}
srcSet={`${imageURI.uri}`}
loading="lazy"
// loading="eager"  default
/>
</ImageListItem>
))}