Реагировать на компонент неправильно рендеринга - PullRequest
Новая
       23

Реагировать на компонент неправильно рендеринга

0 голосов
/ 02 января 2019

У меня есть компонент реагирования, который получает URL-адреса изображений из службы.Я беру эти URL и просто создаю несколько <img .../> элементов для отображения изображений.

В каждой строке 1 список изображений.Это работает при начальной загрузке, но когда я начинаю удалять строки (это делается путем склеивания элемента из массива глобального состояния, обработанного при помощи редукции), строка удаляется правильно, но изображения не меняются.Кажется, что изображения в каждой строке будут «просачиваться».

Вот скриншот:

screencap

Я думаю, мне нужнопринудительно выполнить рендеринг где-нибудь, может быть, на родительском уровне?

Вот мой код контейнера: 

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);
...