Redux 在一个组件中仅适用于反应原生应用程序

Question

我的应用程序中集成了 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中运行良好，没有任何问题。

Answer 1

您正在导入未连接的组件，而不是（连接的）默认导出。 只需更换

import { NetworkService } from './src/network/NetworkService';

和

import NetworkService from './src/network/NetworkService';

（我不确定你为什么要对未连接的组件进行命名导出。如果没有导出，那么 import 语句会出错，从而使问题更容易诊断。）