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 語句會出錯，從而使問題更容易診斷。）