從Redux映射對象數據

試圖映射從promise中返回的對象，我使用react-router 4和redux，redux-promise。數據已作爲承諾返回，但我似乎無法映射它。如果我沒有記錯，那麼render（）將返回renderBanner函數並將其呈現在那裏，但我有點不確定如何映射這些數據，因爲我只想抓住img並將其映射。從Redux映射對象數據

編輯：例如（使用不同的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"

來源

2017-04-03 Nicholas Ritson

所以你的承諾返回的數據是一個包含對象的數組，每個對象都有你想要得到的圖像？ – Gayane

是的，這是正確 –

在你的渲染（）你可以檢查是否this.props.data，調用返回renderBanner，如果不返回null，並在renderBanner函數中一切正確，你可以返回 – Gayane

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-03 21:28:08 Gayane

刪除道具參數，它帶來了，但我有一個映射問題，當我console.log this.props。有效載荷我得到[[PromiseValue]]然後我的數據有3個對象0,1,2裏面有一個圖像屬性，我正在試圖獲取。我如何通過[[PromiseValue]]映射如果我嘗試console.log數據與this.props.payload.data它回來undefined –

從Redux映射對象數據

回答

相關問題