React Native：可能的未处理承诺拒绝（id：0）答案

【问题标题】：React Native: Possible Unhandled Promise Rejection (id: 0)React Native：可能的未处理承诺拒绝（id：0）
【发布时间】：2017-12-20 02:45:23
【问题描述】：

所以我正在尝试通过 React-Native 了解有关 Redux 的更多信息。

我正在尝试使用 Axios 发出 HTTPS 请求以从 Web 服务器中提取数据。一切运行良好，我在控制台记录操作，有效负载是我需要的数据。但它仍然会引发“无法读取 null 的属性“数据”类型错误。

以下是我的代码：

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。然而它仍然抛出同样的错误。

【问题讨论】：

标签： javascript react-native redux react-redux redux-thunk

【解决方案1】：

很好。我想我只是犯了一个错误。

我在 getBannerText() 中调用了 This.state.data 而不是 this.props.data。

解决了这个问题。

【讨论】：