[英]React Native: Possible Unhandled Promise Rejection (id: 0)
所以我想通過React-Native了解更多有關Redux的信息。
我正在嘗試向Axios發出HTTPS請求以從Web服務器提取數據。 一切運行正常,我控制台記錄動作,有效負載是我需要的數據。 但它仍然會拋出'無法讀取屬性'數據'null'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
我嘗試過改變一些東西,谷歌搜索,搜索,消除Action Reducer,盡可能通過返回一個字符串使其盡可能基本。 它拒絕工作。 有沒有人遇到類似的問題或知道如何解決它?
感謝您的時間。
編輯:我也控制記錄'this'作為ReduxTestObj中getBannerText()的第一行,它成功返回this.props.data作為我想要的數據和this.props.loading為false。 但它仍然會引發同樣的錯誤。
韋爾普。 我想我只是犯了一個錯誤。
我在getBannerText()中調用This.state.data而不是this.props.data。
這解決了這個問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.