reactjs - 复杂的反应错误：错误：元素类型无效：期望字符串（用于内置组件）或类/函数但得到：对象

Question

每当我在我的 React/Redux 应用程序上提交登录尝试时，我都会收到此错误。浏览器窗口中弹出的完整错误如下：

Error: Element type is invalid: expected a string (for built-in components)or a class/function
(for composite components) but got: object. You likely forgot to export your component from 
the file it's defined in, or you might have mixed up default and named imports.


Check the render method of `Router.Consumer`.

它当然还显示了它认为发生错误的代码块，但我们知道这并不总是准确的，这是其中之一。它显示的块来自loginAction.js 文件，看起来像这样......

import DOMAIN from "../constants/domain"

export default function loginAction(state){
    let user = null
    let login_destination = DOMAIN() + 'login'
    console.log("Before the fetch, the request is... POST " + login_destination)
    let login_object = {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        body: JSON.stringify({
            username: state.username_input,
            password: state.password_input
        })
    }
    return (dispatch) => {
        fetch(login_destination, login_object)
        .then(resp => resp.json())
        .then(json => user = json)
        .then(user => {
            console.log("Inside the LoginAction.js file. In final .then() block once a user model has been fetched")
            console.log(user)
            let userObj = {user: user.user, stocks: user.user_stocks}

            console.log(userObj) // THIS IS WHERE THE COMPILER SAYS THE ERROR OCCURS

            if (typeof(user) != "string"){ 
                dispatch({type: 'USER_LOGIN', payload: userObj})
            }
            else{
                dispatch({type: 'USER_LOGIN', payload: user})
            }
        })
    }
}

我在网上看到很多人说这样的错误通常是导入/导出问题造成的，但正如您在此处看到的，loginAction.js文件设置为仅导出一件事，并且接收的文件动作看起来像这样......

import React, {Component} from 'react';
import { connect } from 'react-redux';
import loginAction from '../../dispatch_actions/loginAction.js';
import Signup from '../dispatchers/Signup';
import './css/LoginOrSignUp.css'


const mapStateToProps = (state) => {
    return({
        failed_attempt: state.user.failed_attempt
    })
}

const mapDispatchToProps = (dispatch) => {
    return({

        submitLogin: (state) => {
            dispatch({type: 'LOAD_LOGIN'})
            dispatch(loginAction(state))
        }
        
    })
}

在上面显示的文件中当然还有更多代码，但除了登录按钮之外，这里没有其他任何事情太疯狂或太混乱了。还值得一提的是，调度程序确实到达了减速器，因为我在那里有一个 console.log 语句不断受到打击，这里也是那个文件，以防它可能有帮助，因为最后的 console.og 语句是最后一件事在错误之前受到打击

export default function manageUser(
    state= 
        {
            failed_attempt: {failed: false, reason: null},     // if a login attemot fails, this will be used to prompt a message
            isLoggedIn: false,  // determine whether these is a current user
            loading: false,     // true if fetching user from a login or signup
            name: null,         // user's name
            email: null,        // Kind of obvious
            gen_code: null,     // Exists only as a code emailed to a user upon sign up. Expires in 90 seconds
            targets: [null],    // stocks that user has targetted. Will be represented as an object array

     }, action){
        switch(action.type){
            // {type: LOAD_LOGIN}
            case('LOAD_LOGIN'):
                return ({
                    ...state, loaidng: true
                })

            // {type: "FAILURE", payload: <string> }
            case('FAILURE'):
                return ({
                    ...state, failed_attempt: {failed: true, reason: action.payload}
                })
                
            // {type: "USER_LOGIN", payload: <userObj from Rails Server>}
            // userObj will look like this...
            //             
            //              _____________________________________________________________________________
            //              | user:                                                                     |
            //              |  {username: <input>, password_digest: <hidden>}                           |
            //              | stocks:                                                                   |
            //              |  [ <array of ints> ]                                                      |
            //              |___________________________________________________________________________|     
            //
            // 
            case('USER_SIGNUP'):
            case('USER_LOGIN'):
                console.log("Inside User Reducer, LOGIN Case. Payload below")
                console.log(action.payload)
                return({
                    ...state, failed_attempt: {failed: false, reason: null}, isLoggedIn: true, loading: false, name: action.payload.user.username, stocks: action.payload.stocks
                })
            default:
                return ({
                    ...state
                })
            
            
        }


}```

标签： reactjsreduxdispatcherreducers