你如何访问你的类组件中的函数道具？

Question

我正在尝试设置 react redux，我也设置了它，但我收到错误 TypeError: _this.props.showLoader is not a function。 （在'_this.props.showLoader(true)'中，'_this.props.showLoader'是未定义的）。

this.props.showLoader(true)

此函数已在 Action.js 文件中定义，您可以在下面找到它。

每当我尝试从 Root.js 文件调用函数时都会出现此错误，您可以在下面找到它。

下面是我到目前为止所做的代码：->

我有 App.js 文件，我在其中设置了提供程序和存储

import React, { Component } from 'react';
import {StyleSheet, View, Text} from 'react-native';

import {Provider} from 'react-redux';
import store from './src/redux/Store'
import Root from './src/root/Root'



function App() {
  return (
        <Provider store={store}>
        <View style={localStyles.container}>
          <Root/>
        </View>
        </Provider>
  );
}

export default App;

const localStyles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

这是导航路线文件

import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import TutorialSwipeScreen from '../components/viewcontrollers/onboarding/TutorialSwipeScreen'


 const Stack = createStackNavigator();

 function goStack() {
    return (
      <NavigationContainer>
        <Stack.Navigator
            screenOptions={{
                headerShown: false
            }}
        >
          <Stack.Screen name="Login" component={Login Screen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }


 export default goStack;

我的 Root.js 文件 我正在尝试 this.props.showLoader 它给了我错误

import React, {Component} from 'react'
import {View, StyleSheet, Text} from 'react-native'
import NavigationRoute from './NavigationRoutes'

import DeviceInfo from 'react-native-device-info'

class Root extends Component {

   constructor(props) {
       super(props)
       console.warn('props=', this.props)
   }

   componentDidMount() {
     this.call()
   }

   call = () => { 
       this.props.showLoader(true)
       
   }

   render () {
       return (
           <View style={styles.rootContainer}>
               <NavigationRoute/>
           </View>
       )
   }

}

export default Root;

const styles = StyleSheet.create({
   rootContainer: {
     flex: 1,
   }
 });

我的 RootContainer.js 文件

 import {bindActionCreators} from 'redux'
 import {connect} from 'react-redux'

 import * as Actions from '../redux/Actions'

 import Root from './Root'

 function mapStateToProps(state) {
     return {
        shouldShowLoader: state.dataReducer._showLoader,
        shouldChangeCounting: state.dataReducer.counter
     }
 }

 function mapDispatchToProps(dispatch) {
     const mergedActions = Object.assign({}, Actions);
     return bindActionCreators(mergedActions, dispatch)
 }

 export default connect(mapStateToProps, mapDispatchToProps)(Root);

我的 Store.js 文件

import {createStore} from 'redux'

import reducers from './RootReducer'

export default createStore(reducers);

我的 RootReducer.js

 import {combineReducers} from 'redux'
 import dataReducer from './reducers/Reducer'

 const rootReducer = combineReducers ({
     dataReducer,
 })

 export default rootReducer;

我的 Action.js 文件有一个函数 showLoader(bool)，我尝试从 Root.js 调用它，这给了我上面引用的错误。

export const DISPLAY_LOADER = 'DISPLAY_LOADER';
export const REFRESH = 'REFRESH';
export const COUNTER = 'COUNTER';

 export function showLoader(bool) {
    return {
      type: DISPLAY_LOADER, data: bool,
    };
  }

  export function refresh() {
    return {
      type: REFRESH, data: true,
    };
  }

  export function counting(count) {
      return {
          type: COUNTER, data: count
      }
  }

最后是 Reducer.js 文件代码

import { DISPLAY_LOADER, REFRESH, WELCOME_POPUP, LOGIN_RELOAD, MESSAGE_POPUP, LOGOUT, COUNTER} from '../Actions';

 const initialState = {
     counter: 5,
     _showLoader: false,
     _showMessagePopup: false,
     _loginReload: false,
     _refresh: false,
     _heading: 'Message Heading',
     _message: 'PWG Custom Message',
 }


 const dataReducer = (state = initialState, action) => {

    switch(action.type) {
        case DISPLAY_LOADER: {
            return {...initialState, _showLoader: action.data}
        }
        case REFRESH: {
            return {...initialState, _refresh: action.data}
        }
        case LOGOUT: {
            return {...initialState, _refresh: true}
        }
        case COUNTER: {
            return {...initialState, counter: action.data}
        }
        default: {
            return state;
        }
    }

 }

 export default dataReducer;

所以我的错误在哪里，我无法找到最终收到错误的代码行。请帮忙。另外我是新手，请多多包涵。

谢谢

Answer 1

我得到了答案，我正在回答我自己的帖子。

在App.js文件中需要导入

根容器

而不是

根

就是这样，它的工作原理瞧。

import RootContainer from './src/root/RootContainer'

Answer 2

我看到你的 showLoader 绑定到你的 redux reducer。

我可以建议您，您应该在减速器中返回 state 而不是 initialState。基本上你所做的是在 redux 中的每次状态更改之后，其他所有内容都将返回到它的 initialState 而不是更改后的状态本身。

您也没有将道具 showLoader 传递给您的 Root 组件。如果您打算将showLoader 用作Root 组件的setState 函数，则应在connect 函数中的mapDispatchToProps 中定义该函数