Question

尝试映射从promise返回的对象，我正在使用react-router 4和redux，redux-promise。数据已作为承诺返回但我似乎无法映射它。如果我没记错的话，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

＆＃13;

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

＆＃13;

将您的代码更改为此。希望这会对你有所帮助

从ReduxPromise映射对象数据

1 个答案: