React组件无法正确渲染

Question

我有一个react组件，可以从服务中获取图像网址。我使用这些网址，然后创建一些<img .../>元素来显示图像。

每行有1个图像列表。这在初始加载时有效，但是当我开始删除行时（通过将元素从全局状态数组中剪接完成，由redux处理），该行将被正确删除，但图像不会更改。似乎每一行的图像都会“泄漏”。

这是一个屏幕截图：

我想我需要在某个地方强制进行重新渲染，也许是在父级别？

这是我的容器代码：

class SourceMediaPreviewContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      source: {},
      media: [],
    };
  }
  async componentDidMount() {
    const { source: _source } = this.props;
    const { data } = (await this.getMedia({ source: _source })) || {};
    const { media = [], ...source } = data || {};
    this.setState({ source, media });
  }
  async getMedia({ source }) {
    return describeSourceMedia({ source });
  }
  render() {
    return (
      <div className="asb-source-media-preview">
        {this.state.media.map((media, i) => (
          <img
            key={media.url}
            className="asb-source-media-preview__img"
            src={media.media_url}
            alt={media.title}
          />
        ))}
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  // mediaSource: state.asb.mediaSource,
});

const mapDispatchToProps = (dispatch) =>
  bindActionCreators(
    {
      // ...mediaSourceOperations,
    },
    dispatch,
  );

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(SourceMediaPreviewContainer);