更改页面时如何更新图像？

Question

我已经显示了一些包含图片的对象。另一方面，当我尝试更改页面时，诸如名称之类的书面数据正确更新，图片保持不变

我尝试将imageHash放置到url中，以便它更新状态。

state =
{
imageHash = Date.now()
}
return (
            <div>
                {mediaId.media && mediaId.media.map(photo => (
                    <img src={`http://127.0.0.1:8000/api/media/${photo.id}?${imageHash}`} alt={`media${photo.id}`}/>
                ))}
            </div>
        );

我需要显示相应的照片。

Answer 1

我自己找到了解决方案。

UNSAFE_componentWillReceiveProps(nextProps) {
        if (nextProps.id !== this.props.id) {
            this.setState({
                id: nextProps.id,
                imageHash: nextProps.imageHash
            });
        }
        setImmediate(() => this.loadData());
    }

它会检查道具更改，如果有更改，则会立即使用新道具加载数据。