Connect() 中的 mapDispatchToProps() 必须返回一个普通对象

Question

这是 LoginScreenContainer.js

import React from 'react'
import { connect } from 'react-redux'
import LoginScreen from '../components/LoginScreen.js'
import * as AUTH_ACTIONS from '../actions/auth.js'

const mapStateToProps = state => ({
    loggedIn: state.AUTH.loggedIn
})

const mapDispatchToProps = (dispatch) => {
    loginDefault: (username , password) => {
        dispatch(AUTH_ACTIONS.actions.loginDefault(username, password))
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)

这是动作/auth.js

import types from '../utilities/types.js'

export const actions = {
    loginDefault: (username, password) => ({
        type: types.LOGIN_DEFAULT,
        meta: {
            type: 'api',
            path: '/users/token',
            method: 'POST'
        },
        payload: {username, password}
    })
};

export default actions

调试此问题的最佳方法是什么。我无法弄清楚哪个部分出了问题。我已经想了3天了。需要指导和帮助。谢谢你。

（我对反应还很陌生）

Answer 1

您的派遣缺少返回值，您应该将其更改为

const mapDispatchToProps = (dispatch) => ( { // <- forgot the wrapping with ( here
    loginDefault: (username , password) => {
        dispatch(AUTH_ACTIONS.actions.loginDefault(username, password))
    }
} ) // <- forgot closing of the wrapping with ) here 

这是由于箭头函数的性质，你似乎正确地为状态道具做了这件事，所以我相信这是一个小疏忽。

因此，具有此功能的箭头函数

const sample = argument => { return { test: '1' } }

等于

const sample = argument => ( { test: '1' } );

但不是

const sample = argument => { test: '1' };

因此，如果您使用箭头函数，并且希望返回一个对象，则应该返回它，或者用( )括号将其包裹起来