javascript - 从 react-redux 中的容器调用操作时出错

Question

我正在将 redux 与我的 react-native 应用程序集成。我已将状态和操作管理移至容器，并使用“连接”将容器与组件集成。

应用程序.js

const AppNavigator = createSwitchNavigator({
    SplashScreen: SplashScreen,
    render() {
        return(
            <Provider store={store}>
            <AppNavigator/>
            </Provider>
        )
    }
});

const store = createStore(reducer);

export default createAppContainer(AppNavigator);

登录.js

import React from "react";
import {View} from "react-native";
import authenticateUser from "../../../services/api/authenticateUser";

const SignIn = (props) => {

    const authenticate = async () => {
        try {
            return await authenticateUser.get('/abc', {
                params: {
                    code,
                }
            });
        }
        catch (e) {
        }
    }

    const validateUserCredentials = (isValid) => {

            authenticate().then(response => {
                const responseData = response.data;
                props.updateEventRules(responseData);
            });
        }
    }


    return (
        <View></View>
    );

export default SignIn;

登录Container.js

import {eventRulesUpdated} from '../../../actions/actions';
import {connect} from 'react-redux';
import SignIn from './signin-screen';

const mapStateToProps = (state) => ({});

const mapDispatchToProps = dispatch => {
    return {
        updateEventRules: rules => {
            dispatch(eventRulesUpdated(rules))
        }
    }
}

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

运行应用程序时出现错误 - props.updateEventRules() 不是函数。

谁能帮助我我做错了什么？

标签： javascriptreactjsreact-nativeredux

Answer 1

你应该像这样在 Signin.js 中有连接函数

import React from "react";
import {View} from "react-native";
import authenticateUser from "../../../services/api/authenticateUser";

const SignIn = (props) => {

    const authenticate = async () => {
        try {
            return await authenticateUser.get('/abc', {
                params: {
                    code,
                }
            });
        }
        catch (e) {
        }
     }

     const validateUserCredentials = (isValid) => {

        authenticate().then(response => {
            const responseData = response.data;
            props.updateEventRules(responseData);
        });
    }
}

return (
    <View></View>
);

const mapStateToProps = (state) => ({});

const mapDispatchToProps = dispatch => {
    return {
        updateEventRules: rules => {
            dispatch(eventRulesUpdated(rules))
        }
    }
}

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