React Native NetInfo'handers不是函数'错误代码

时间:2017-12-18 15:25:33

标签: javascript reactjs react-native

我按照'HandlerBar Labs'中的'使用Redux Persist保存数据'的教程。在练习应用程序中一切正常,但当我尝试在我的实际应用程序中使用它时,我得到了错误。以下是完整的错误消息:enter image description here

这是我正在使用的一些代码..

我创建了一个网络操作和网络缩减器,所以..

network_action.js:

export const CHANGE_CONNECTION_STATUS = 'CHANGE_CONNECTION_STATUS';

export const changeNetworkStatus = status => {
  return {
    type: CHANGE_CONNECTION_STATUS,
    status,
  };
};

network_reducer.js:

import { CHANGE_CONNECTION_STATUS } from '../actions/network_action';

const intitialState = {
  connected: false,
  hasCheckedStatus: false,
};


const isConnected = (status) => {
  if (status.toLowerCase() === 'none') {
    return false;
  }

  return true;
};


export default (state = intitialState, action) => {
  switch (action.type) {
    case CHANGE_CONNECTION_STATUS:
      return {
        ...state,
        hasCheckedStatus: true,
        connected: isConnected(action.status),
      }
    default:
      return state;
  }
}

然后在我的根app.js ..

import { Platform, AsyncStorage, NetInfo } from 'react-native';
import { changeNetworkStatus } from './redux/actions/network_action';

componentWillMount() {
    NetInfo.addEventListener('connectionChange', this.handleNetworkChange);
    };

const mapDispatchToProps = (dispatch) => {
  return {
    handleNetworkChange: (info) => { dispatch(changeNetworkStatus(info)); }
  };
};

这是我的package.json依赖项..

"dependencies": {
    "axios": "^0.16.2",
    "instabug-reactnative": "^2.0.18",
    "link": "^0.1.5",
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-dom": "16.0.0-alpha.12",
    "react-native": "0.50.0",
    "react-native-auth0": "^1.2.1",
    "react-native-dotenv": "^0.1.0",
    "react-native-fontawesome": "^5.7.0",
    "react-native-google-analytics-bridge": "^5.3.3",
    "react-native-localization": "*",
    "react-native-splash-screen": "^3.0.1",
    "react-native-swipe-gestures": "^1.0.2",
    "react-navigation": "^1.0.0-beta.21",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-persist": "4.10.2",
    "redux-thunk": "^2.2.0",
    "watchman": "^0.1.8"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "babel-jest": "20.0.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react-native": "^2.0.0",
    "enzyme": "^2.9.1",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.4.0",
    "eslint-plugin-react-native": "^3.1.0",
    "jest": "20.0.4",
    "react-test-renderer": "16.0.0-alpha.12"
  },

希望有足够的细节,谢谢你的帮助!

2 个答案:

答案 0 :(得分:1)

试试这个:

NetInfo.addEventListener('connectionChange', this.props.handleNetworkChange);

this.props.handleNetworkChange代替this.handleNetworkChange,因为redux mapDispatchToProps将您的函数映射到组件道具)

答案 1 :(得分:0)

我的问题出在AWS上:

node_modules/aws-appsync/node_modules/@redux-offline/redux-offline/lib/defaults/detectNetwork.native.js

查找线:97、198、179

更改: _netinfo.default.getConnectionInfo() 通过 _netinfo.default.fetch();

然后更改: _netinfo.default.addEventListener('connectionChange',函数(connectionInfo){ 通过 _netinfo.default.addEventListener((connectionInfo)=> {