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

Question

我已经展示了一些包含图片的对象。当我尝试更改页面时，写入的数据(例如名称)会正确更新，而图片则保持不变

我尝试在url中放置一个imageHash，这样它就可以更新状态。

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());
    }

它会检查道具的变化，如果有变化，它会立即用新道具加载数据。