Отображение данных объекта из ReduxPromise

Question

Пытаясь отобразить объект, который был возвращен из обещания, я использую реагирующий маршрутизатор 4 и избыточность, избыточное обещание. данные были возвращены как обещание, но я не могу отобразить их. Если я правильно помню, то render() возвращает функцию renderBanner и отображает ее там, но я немного не уверен в том, как отобразить эти данные, так как я хочу просто взять img и отобразить его.

редактировать: пример (использует другой API, но тот же процесс)

файл компонента

import React, { Component } from 'react';
import { Grid, Image } from 'react-bootstrap';
// import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { fetchAdverts } from '../actions/adverts_action';

class FullWidthBannerAd extends Component {
  componentDidMount(props) {
    this.props.fetchAdverts();
  }

  constructor(props) {
    super(props)
    // this.state = {
    //   data: []
    // };
    console.log('Props Contains:', props);
  };

  renderBanner(props) {
    console.log('renderBanner Contains:', props);
    return (
      <div>
        hello
      </div>
    )
  }

  render() {
    return (
      <Grid>
        {this.renderBanner()}
      </Grid>
    );
  }
}

function mapStateToProps(state) {
  return {
    adverts: state.adverts
  };
}

export default connect(fetchAdverts)(FullWidthBannerAd);

обещание вернулось

[,…]
0
:{_id: "57bf06e2ad5f52130098ae1c", sort_order: null, img: "e670cf43-9ed7-45f4-987d-d899af472f4c.jpg",…}
_id:"57bf06e2ad5f52130098ae1c"
img:"e670cf43-9ed7-45f4-987d-d899af472f4c.jpg"

Answer 1

import React, { Component } from 'react';
import { Grid, Image } from 'react-bootstrap';
// import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { fetchAdverts } from '../actions/adverts_action';

class FullWidthBannerAd extends Component {
  constructor(props) {
    super(props)
    // this.state = {
    //   data: []
    // };
    console.log('Props Contains:', props);
  };
  
   componentDidMount() {
    console.log(this.props);
    this.props.fetchAdverts();
  }

  renderBanner() {
    console.log('renderBanner Contains:', this.props);
    return (
      <div>
        hello
      </div>
    )
  }

  render() {
    return (
      <Grid>
        {this.renderBanner()}
      </Grid>
    );
  }
}

измени свой код на это. Надеюсь, что это поможет вам