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

我正在尝试设置react redux，我也设置了它，但我得到一个错误TypeError:\u this.props.showLoader不是一个函数。（在“\u this.props.showLoader（true）”中，“\u this.props.showLoader”未定义）

this.props.showLoader（true）

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

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

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

我有一个App.js文件，其中设置了provider和store

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,
  },
});

mystore.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;

所以，我的错误是，我无法找到我接收到错误的代码行。请帮忙。我也是新来的，请容忍我

---

谢谢

我看到你的

showLoader

与你的redux reducer绑定在一起

我的建议是，您应该在减速机中返回

state

而不是

initialState

。基本上，您所做的是在redux中的每个状态更改之后，其他所有内容都将返回到它的

初始状态

，而不是更改后的状态本身

---

您也没有将道具

showLoader

传递给您的

Root

组件。如果您打算将

showLoader

用作

Root

组件的setState函数，则应在

mapDispatchToProps

中定义该函数，并在

connect

函数中定义该函数

在App.js文件中，您需要导入

根容器

而不是

根

就是这样，它起作用了，瞧

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

---

现在我能看到的是，您的减速机有故障，因为每次减速机都会返回

初始状态

而不是

状态

。返回状态的第一个选项对我不起作用。当我返回时，

case-DISPLAY\u-LOADER:{const-newState=Object.assign（{}，state，{{u-showLoader:action.data}）；return-newState；}

现在第二个选项我不明白你的意思，我应该如何传递道具请你详细说明。是的，我想用它作为一个setState，但是你将如何通过导入到rootContainer类来定义它呢？你所做的不是

{…initialState}

而是

{…state}

不返回{…state}抛出错误。我想修改_showloaderstate，以便所有状态都是初始状态，只有_showloaderstate将更改what if，而不是执行

函数mapDispatchToProps（dispatch）{const mergedActions=Object.assign（{}，Actions）；return bindActionCreators（mergedActions，dispatch）}

只需将操作传递给

connect

函数，如

导出默认连接（mapstatetops，{/**此处的操作*/}）（Root）我已通过bindActionCreators合并所有操作来传递。但我是按照您所说的那样编写的
exportdefaultconnect（mapStateToProps，{showLoader:（）=>dispatch（{type:'DISPLAY_LOADER'}））（Root）我是这样做的，但它仍然给了我同样的错误
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
      }
  }

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;

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