2017-07-14 99 views
3

所以我想通過React-Native瞭解更多關於Redux的信息。React Native:可能未處理的承諾拒絕(id:0)

我試圖發出一個HTTPS請求與Axios從網絡服務器拉數據。一切運行良好,我控制檯登錄的行動和有效載荷是我需要的數據。但它仍然會拋出'無法讀取'TypeError'屬性'數據'。

下面是我的代碼:

import React, { Component } from 'react'; 
import ReduxThunk from 'redux-thunk'; 
import { StackNavigator } from 'react-navigation'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import reducers from '../reducers'; 
import ReduxTestObj from '../components/ReduxTestObj'; 

export default class ReduxTest extends Component { 
    render() { 
     return (
      <Provider store={createStore(reducers, {}, applyMiddleware(ReduxThunk))}> 
      <ReduxTestObj /> 
      </Provider> 
     ); 
     } 
    } 

這裏是ReduxTestObj

import React, { Component } from 'react'; 
import _ from 'lodash'; 
import { View } from 'react-native'; 
import { connect } from 'react-redux'; 
import DevBanner from './DevBanner'; 
import Header from './Header'; 
import { actionCreator } from '../actions'; 

class ReduxTestObj extends Component { 
    componentWillMount() { 
    this.props.actionCreator('urlIWantToGoTo'); 
    } 
    getBannerText() { 
    if (this.props.loading) { 
     return 'PULLING DATA. GIVE ME A SECOND'; 
    } 
    const rObj = _.map(this.state.data[1].recipient_list); 
    const rName = []; 
    for (let i = 0; i < rObj.length; i++) { 
     rName[i] = rObj[i].team_key.substring(3); 
    } 
    const winnerMSG = `Teams ${rName[0]}, ${rName[1]}, ${rName[2]}, ${rName[3]} Won`; 
    return winnerMSG; 
    } 
    render() { 
    return (
     <View> 
     <Header 
      text={'Redux Testing'} 
     /> 
     <DevBanner 
     message={this.getBannerText()} 
     /> 
     </View> 
    ); 
    } 
} 

const mapStateToProps = state => { 
    return { 
    data: state.tba.data, 
    loading: state.tba.loading 
    }; 
}; 

export default connect(mapStateToProps, { actionCreator })(ReduxTestObj); 

這裏是行動造物主

import axios from 'axios'; 
import { TBA_PULL } from './Types'; 


export const actionCreator = (url) => { 
    return (dispatch) => { 
    axios({ 
     method: 'get', 
     url, 
     responseType: 'json', 
     headers: { 
     'Auth-Key': 
'Hidden For Obvious Reasons' 
     }, 
     baseURL: 'theBaseUrlOfTheWebsite' 
    }).then(response => { 
     dispatch({ type: TBA_PULL, payload: response.data }); 
    }); 
    }; 
}; 

這裏是減速

import { TBA_PULL } from '../actions/Types'; 

const INITIAL_STATE = { data: [], loading: true }; 
export default (state = INITIAL_STATE, action) => { 
    console.log(action); 
    switch (action.type) { 
    case TBA_PULL: 
     return { ...state, loading: false, data: action.payload }; 
    default: 
     return state; 
    } 
}; 

如上所述,console.log(action)打印出來並且它所具有的數據是正確的。但它繼續拋出以下錯誤: Error1

我試着改變周圍的東西,谷歌搜索,消除動作減速器,使其儘可能基本只是返回一個字符串。它拒絕工作。 有沒有人遇到類似的問題或知道如何解決它?

謝謝你的時間。

編輯:我也控制檯登錄'這'作爲第一行getBannerText()在ReduxTestObj和它成功返回this.props.data作爲我想要的數據和this.props.loading爲false。但它仍然會引發同樣的錯誤。

回答

0

Welp。我想我只是犯了一個錯誤。

我在getBannerText()中調用This.state.data代替this.props.data。

解決了這個問題。

相關問題