React - Redux 错误：连接后元素类型无效答案

【问题标题】：React - Redux Error: Element type is invalid after connectReact - Redux 错误：连接后元素类型无效
【发布时间】：2021-02-28 00:42:50
【问题描述】：

我正在努力学习 React - Redux。我创建了一个考试组件，如下所示：

class ExamHome extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {
        return (
            <TabPane>
                <Exam />
            </TabPane>
        )
    }
}

export default ExamHome;

我创建了一个考试反应组件，如下所示：

class Exam extends React.Component {

    constructor(props) {
        super(props)
    }

    render() {
        return (
            "hello"
        )
    }
}

const mapStateToProps = state => {
    return {
        examUrl: state.examApp.examUrl
    }
};

export default connect(mapStateToProps, {
    showExam
})(Exam);

这是我的减速器：

let initialState = {
    examUrl: null
}

const exam = (state = initialState, action) => {
    switch (action.type) {
        case "SHOW_EXAM":
            return { ...state, examUrl: action.examToken }

        default:
            return state
    }
};

export default exam

这是我的行动：

export const showExam = t => {
    return dispatch => dispatch({
        type : "SHOW_EXAM", examToken : t
    })
}

如果我删除 connect 它工作正常如果我添加 connect 我得到以下错误：

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（用于复合组件），但得到：对象。

查看ExamHome的渲染方法。

我尝试了在Stackoverflow 中找到的所有可能的解决方案，但都没有奏效。感谢您的帮助。

编辑：

这里是rootReducer.js

import { combineReducers } from "redux"
import { connectRouter } from 'connected-react-router'
import customizer from "./customizer/"
import auth from "./auth/"
import navbar from "./navbar/Index"
import exam from "./exam/exam"

const rootReducer = (history) => combineReducers({
  customizer: customizer,
  auth: auth,
  navbar: navbar,
  exam: exam,
  router: connectRouter(history)
})

export default rootReducer

【问题讨论】：

你能展示一下 combineReducers 吗？另外，为考试声明 propTypes (Exam.propTypes ...)
我添加了减速器代码，但我不知道你所说的声明 propTypes 是什么意思。你能举个例子吗？在我遵循的示例中，我没有看到类似的内容。
我修复了但仍然是同样的错误。
将所有内容恢复原样，并包括您在Exam 和ExamHome 中所做的导入。可能你可能有一个不应该的导入带有花括号，反之亦然。
这能回答你的问题吗？ Redux `connect()` return an object

标签： reactjs react-redux

【解决方案1】：

您只需要定义您的调度并返回到连接函数并使用 componentDidMount 运行它：

import * as Actions from "path of showExam, Actions file only";

class Exam extends React.Component {

componentDidMount() {
    props.onShowExam("any value you want in default");
  }

    constructor(props) {
        super(props)
    ....
}

const mapStateToProps = state => {
    return {
        examUrl: state.examApp.examUrl
    }
};

const mapDispatchToProps = dispatch => {
    return {
         onShowExam: (val) => dispatch(Actions.showExam(val))
    }
};

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

【讨论】：