2016-12-04 26 views
0

我正在學習如何在react-native中設置異步API調用。我正在使用axios。我正在發送ComponentDidMount的調度表,它正在成功更改/更新我的一般狀態。問題是我似乎無法使用這個「數據」。React-Native在ComponentDidUpdate調用Async後沒有合併道具

import React, { Component, PropTypes } from 'react' 
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native' 
import { connect } from 'react-redux' 
import { getMakes} from "../actions/getPrice" 
import * as PriceActions from '../actions/getPrice' 


@connect((store) => { 
    return { 
    cars: store.cars 
    }; 
}) 
export default class CounterContainer extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     cars: { 

     } 
    } 
    } 

    componentDidMount() { 
    this.props.dispatch(getMakes()) 
    } 


    render() { 
    return (
     <View style={styles.container}> 

     <TouchableOpacity> 
      <Text style={styles.back}>Data: {this.props.cars.modelsCount}</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
} 

由於動作正常,它必須是我的減速器的問題?它的內容如下:

function getPrice(state={ 
    cars: [], 
    fetching: false, 
    fetched: false, 
    error: null, 
    }, action) { 
    switch (action.type) { 
     case "FETCH_CARS": { 
     return {...state, fetching: true} 
     } 
     case "FETCH_CARS_REJECTED": { 
     return {...state, fetching: false, error: action.payload} 
     } 
     case "FETCH_CARS_FULFILLED": { 
     return { 
      ...state, 
      fetching: false, 
      fetched: true, 
      cars: action.payload, 
     } 
     } 
    } 
    return state 
} 

export default getPrice; 

enter image description here

回答

1

mapStateToProps需要整個狀態樹作爲第一個參數。 如果state上的截圖是完整的終極版狀態,然後connecto應該是這樣的:

@connect((store) => { 
    return { 
    cars: store.priceReducer.cars 
    }; 
}) 
+0

哇,無法相信我錯過了。謝謝。 – Matty

相關問題