2017-07-14 96 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。

解决了这个问题。

相关问题