Question

我收到此错误“当操作提交的输入值（用户名，密码）以检查redux是否有效时，“操作可能没有未定义的“ type”属性。您拼写了一个常数吗？”。我为此尝试了不同的解决方案，但仍然出现错误，请帮忙！

authActions.js

import axios from 'axios';
import {REGISTER_SUCCESS,REGISTER_FAIL,LOGIN_SUCCESS,LOGIN_FAIL,
    LOGOUT_SUCCESS,USER_LOADING,USER_LOADED,AUTH_ERROR} from './actionType';


export const register = ({username, name, email, password}) => {

    return (dispatch, getState) => {

        const config = {
            headers : {
                'Content-type' : 'Application/json'
            }
        }

        const body = JSON.stringify({
            username,
            name,
            email,
            password
        })

        axios.post('http://localhost:5000/users/register', body , config )
        .then(res => dispatch({
            type : REGISTER_SUCCESS,
            payload : res.data 
        }))
        .catch(err => {
            dispatch(returnErrors(err.response.data, err.response.status, REGISTER_FAIL));
            dispatch({
                type : REGISTER_FAIL
            })
        });
    };
};

export const login = ({username, password}) => {
    return (dispatch, getState) => {

        const config = {
            headers : {
                'Content-type' : 'Application/json'
            }
        }

        console.log(username);

        const body = JSON.stringify({
            username,
            password
        })

        axios.post('http://localhost:5000/users/login', body , config)
        .then(res => setTimeout(() => {
            dispatch({
                type : LOGIN_SUCCESS,
                payload : res.data
            })
        },2000));
    };
}

export const logout = () => {
    return {
        type : LOGOUT_SUCCESS
    }
}

export const loadUser = () => {
    return (dispatch, getState) => {
        dispatch({
            type: USER_LOADING,
        });

        axios.get('http://localhost:5000/users/auth' , tokenConfig(getState))
        .then(res => dispatch({
            type: USER_LOADED,
            payload : res.data
        }))
        .catch(err => {
            dispatch(returnErrors(err.response.data.message, err.response.status));
            dispatch({
                type : AUTH_ERROR
            });
        })
    }
}


//
export const tokenConfig = (getState) => {

    const token = getState().auth.token;

    const config = {
        headers : {
            'content-type' : 'Application/json',
        }
    }

    if(token) {
        config.headers['auth'] = token;
    }

    return config;
}

actionType.js

export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';
export const REGISTER_FAIL = 'REGISTER_FAIL';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAIL = 'LOGIN_FAIL';
export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
export const USER_LOADING = 'USER_LOADING';
export const USER_LOADED = 'USER_LOADED';
export const AUTH_ERROR = 'AUTH_ERROR';

LoginForm.js

import React, {Component} from 'react';
import {
    //StyleSheet,
    View,
    Text,
    TextInput,
    Button    
  } from 'react-native';
  import {reduxForm,Field} from 'redux-form';
  import {connect} from 'react-redux';
  import {login} from './authActions';

  const validate = values =>{
      const errors = {};
      if(!values.username){
          errors.username="Please fill the username"
          return errors;

      }
      if(!values.password){
        errors.password="Please fill the password"
        return errors;

    }
  }

  const myFields = ({label,meta:{error,touched}, input:{onChange}}) =>{
      return(
          <View>
            <Text>{label}</Text>
            <TextInput style={{borderWidth:1,width:300,marginBottom:10}}            
            onChangeText={onChange}/>
            {touched && (error && (<Text style={{color:'red'}}>{error}</Text>))}
          </View>
      );
  }

  const passFields = ({label,meta:{error,touched}, input:{onChange}}) =>{
    return(
        <View>
          <Text>{label}</Text>
          <TextInput style={{borderWidth:1,width:300,marginBottom:10}}
          secureTextEntry={true}        
          onChangeText={onChange}/>
          {touched && (error && (<Text style={{color:'red'}}>{error}</Text>))}
        </View>
    );
}


  const submitbtn = (values,login) =>{
      alert(`here are the values ${JSON.stringify(values)}`);
      login(values);

  }

  const myLoginForm = props => {

      const {handleSubmit} = props;
      const {login} = props;
      return(


        <View>
            <Field
            name="username"           
            component={myFields}
            label="UserName"/>

            <Field
            name="password"           
            component={passFields}
            label="Password"
           />

            <Button title="Submit"
            onPress={handleSubmit(submitbtn,login)}/>

        </View>
      );
  }

  const LoginForm = reduxForm({
      form:'loginform',
      validate
  })(myLoginForm);

  const mapStateToProps =(state) =>({
    isAuthenticated: state.auth.isAuthenticated
  });

  export default connect(mapStateToProps,{login})(LoginForm);

Answer 1

按如下所示编辑您的actionType.js文件

Variant

之所以会发生这种情况，是因为它没有从操作文件中获取操作常量。您可以按照上述代码更改actionType.js。

其他解决方案是您不需要更改actionType.js。您需要按照以下说明更改actionType.js的用法

export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';
export const REGISTER_FAIL = 'REGISTER_FAIL';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAIL = 'LOGIN_FAIL';
export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
export const USER_LOADING = 'USER_LOADING';
export const USER_LOADED = 'USER_LOADED';
export const AUTH_ERROR = 'AUTH_ERROR';

export default {
    REGISTER_SUCCESS,
    REGISTER_FAIL,
    LOGIN_SUCCESS,
    LOGIN_FAIL,
    LOGOUT_SUCCESS,
    USER_LOADING,
    USER_LOADED,
    AUTH_ERROR
}

按照以下说明使用此变量

import * as ActionType from './actionType.js'

“动作可能没有未定义的“类型”

1 个答案: