javascript - Redux 不能在一个组件中仅适用于 React Native 应用程序
问题描述
我的应用程序中集成了 redux。问题是它与其他组件一起工作得很好,但它在特定的一个组件上存在问题。我收到以下错误
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)
这是组件的外观
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);
这就是组件包裹在应用程序周围的方式
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;
应该注意的是,它在没有任何问题的情况PushNotificationsManager
下工作正常。LocationService
解决方案
您正在导入未连接的组件,而不是(连接的)默认导出。只需更换
import { NetworkService } from './src/network/NetworkService';
和
import NetworkService from './src/network/NetworkService';
(我不确定你为什么要对未连接的组件进行命名导出。如果没有导出,那么 import 语句会出错,从而使问题更容易诊断。)
推荐阅读
- javascript - javascript 中的正则表达式只允许数字和一个点后跟最多 2 个数字
- xml - 使用 XSLT 更新 XML 文件并为标签分配 id
- mongoose - 使用 jwt 和 mongoose 确认电子邮件时,无法将“已确认”值设置为 true
- android - Firebase Crashlytics 权限问题
- ios - 具有所需 init 方法的 Swift 类型擦除协议
- c - c中递归删除trie
- jsp - 使用 JSP 在下一页显示表格信息
- reactjs - Reactjs:是否可以在 Reactjs Web 应用程序上接收 AWS SNS
- ios - 是相对于 contentInset 的 UIScrollView 的 contentOffset
- python - GLException:没有 GL 上下文;首先创建一个窗口