[英]Redux doesn't work in one component only for a react native application
I have redux integration in my app.我的应用程序中集成了 redux。 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.应该注意的是,它在
PushNotificationsManager
和LocationService
中运行良好,没有任何问题。
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.) (我不确定你为什么要对未连接的组件进行命名导出。如果没有导出,那么 import 语句会出错,从而使问题更容易诊断。)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.