0

尝试映射从承诺返回的对象，我正在使用 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"
4

1 回答 1

0 

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

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

于 2017-04-03T21:28:08.200 回答