I have redux integration in my app. Problem is its working just fine with other component but its having issues on specific one component. I'm getting the following error
ExceptionsManager.js:86 TypeError: _this.props.changeAlertedNetworkError is not a function
This error is located at:
in NetworkService (at App.js:21)
in Provider (at App.js:20)
in App (at renderApplication.js:40)
in RCTView (at View.js:35)
in View (at AppContainer.js:98)
in ChildrenWrapper (at wrapRootComponent.js:9)
in _class (at wrapRootComponent.js:8)
in Root (at AppContainer.js:112)
in RCTView (at View.js:35)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:39)
this is how the component looks
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import MiniOfflineSign from './MiniOfflineSign'
import { connect } from "react-redux";
import { setIsConnectedOnline, changeAlertedNetworkError } from '../redux/actions';
export class NetworkService extends Component {
state = {
isConnected: false
}
componentDidMount = () => {
this.props.changeAlertedNetworkError("test me")
}
render() {
const { children } = this.props
return (<View style={{ flex: 1 }}>
{
this.state.isConnected ? null : <MiniOfflineSign />
}
{children}
</View>)
}
}
mapStateToProps = (state) => {
return {
isConnectedOnline:state.isConnectedOnline
};
}
mapDispatchToProps = (dispatch) => {
return {
changeAlertedNetworkError: (payload) => dispatch(changeAlertedNetworkError(payload)),
setIsConnectedOnline: (payload) => dispatch(setIsConnectedOnline(payload)),
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(NetworkService);
and this is how the component is wrapped around app
import React from 'react';
import AppContainer from './src/navigation/AppContainer'
import { Provider } from 'react-redux'
import store from "./src/redux/store";
import PushNotificationsManager from './src/push/PushNotificationsManager'
import LocationService from './src/geolocation/LocationService';
import { NetworkService } from './src/network/NetworkService';
const App = () => {
return (
<Provider store={store}>
<NetworkService>
<LocationService>
<PushNotificationsManager>
<AppContainer/>
</PushNotificationsManager>
</LocationService>
</NetworkService>
</Provider>
);
};
export default App;
it should be noted that it works fine in PushNotificationsManager
& LocationService
without any issues.
You're importing the unconnected component, rather than the (connected) default export. Just replace
import { NetworkService } from './src/network/NetworkService';
with
import NetworkService from './src/network/NetworkService';
(I'm not sure why you're doing the named export of the unconnected component. If that wasn't exported then the import statement would have given an error, making the problem easier to diagnose.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.