在 React 应用程序中使用使用 React、Redux 和 React-Redux 完成的组件并使用 Webpack 构建时出错

2024-06-25

我已经使用react、redux 和react-redux 完成了一个带有商店的组件。代码的捆绑是通过 webpack 完成的。（请检查下面附加的代码）

当我想在另一个 React 项目中使用 webpack 构建组件时，我遇到了以下问题。

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

然后我继续在代码中进行以下修改，之前我有一个解构分配，如下所示connect and 绑定动作创建者

import {connect} from 'react-redux';
import  {bindActionCreators} from 'redux';
import  actions from '../app/redux/actions';

然后我像下面一样更改了它，删除了 connect 和 bindActionCreators 周围的大括号

import React from 'react';

import connect from 'react-redux';
import  bindActionCreators from 'redux';
import  actions from '../app/redux/actions';

import postal from 'postal';

const channel = postal.channel("msplayer");

class Player extends React.Component {

但之后我面临以下错误，因为我猜这与 babel 将 ES6 转译为 ES5 有关，但不确定要遵循哪些步骤来解决此问题，希望得到答案或一些指示来解决此问题？

Uncaught TypeError: (0 , _reactRedux2.default) is not a function
Uncaught TypeError: Cannot read property 'PlayerWrapper' of undefined

组件代码

import React from 'react';

import {connect} from 'react-redux';
import  {bindActionCreators} from 'redux';
import  actions from '../app/redux/actions';

import postal from 'postal';

const channel = postal.channel("msplayer");

class Player extends React.Component {


    constructor() {
        super();
        this.state = {
            userData: {},
            uiStates: {
                panelClosed: true,
                submissionSelected: false
            },
            selectedSubmission: {}
        };
        this.subSelectChannel = null;
        this.tabSelectChannel = null;
    }


    componentWillMount() {
        require('!style!css!../app/styles/player.css');
    }

    componentDidMount() {
        var _that = this;
        var _msData = {
            piToken: this.props.piToken,
            sectionId: this.props.sectionId,
            assignmentId: this.props.assignmentId,
            userId: this.props.userId
        };

        this.props.actions.getAssignmentData(msData);
        this.props.actions.getPeerSubmissionData(msData);

        this.subSelectChannel = channel.subscribe("submission.selected", function (data, envelope) {
            _that.setState({
                    uiStates: Object.assign({}, _that.state.uiStates, {
                        "submissionSelected": true
                    })
                }
            );
            _that.setState({
                    selectedSubmission: data.submission
                }
            );
        });

        this.tabSelectChannel = channel.subscribe("tab.selected", function (data, envelope) {
            if (data.submitted) {
                _that.showSubmissionDetailPanel(data.data);
            } else {
                _that.hideSubmissionDetailPanel()
            }
        });
    }

    closePanel() {

        postal.publish({
            channel: "notifier",
            topic: "notifier.notify",
            data: {
                type: "warning",
                message: "warning message"
            }
        });


        if (this.state.uiStates.panelClosed) {

            this.setState({
                    uiStates: Object.assign({}, this.state.uiStates, {
                        "panelClosed": false
                    })
                }
            );
        } else {


            postal.publish({
                channel: "msplayer",
                topic: "close.selected",
                data: {}
            });

            this.setState({
                    uiStates: Object.assign({}, this.state.uiStates, {
                        "panelClosed": true,
                        "submissionSelected": false
                    })
                }
            );
        }
    }


    hideSubmissionDetailPanel() {
        console.log("inside hide submission panel");
        this.setState({
                uiStates: Object.assign({}, this.state.uiStates, {
                    "submissionSelected": false
                })
            }
        );
    };

    showSubmissionDetailPanel(data) {
        console.log("inside show submission panel");
        this.setState({
                uiStates: Object.assign({}, this.state.uiStates, {
                    "submissionSelected": true
                })
            }
        );

        this.setState({
            selectedSubmission: data
        });
    };


    loadUserAssignmentData(submission) {

        this.setState({
                uiStates: Object.assign({}, this.state.uiStates, {
                    "submissionSelected": true
                })
            }
        );

        postal.publish({
            channel: "msplayer",
            topic: "submission.selected",
            data: {
                submission: submission
            }
        });

    }

    componentWillUnmount() {
        postal.unsubscribe(this.subSelectChannel);
        postal.unsubscribe(this.tabSelectChannel);
    }

    render() {

        var _that = this;
        var _submittedKey = 0;
        var _unsubmittedKey = 0;
        return (
            <div className="player-container col-sm-12">
                <div className="row">
                </div>
                <div className="row">
                    <div className={_that.state.uiStates.panelClosed?"col-sm-12":"col-sm-8"}>
                        <div className="top-actions-panel">
                            <div className="pull-right">

                            </div>


                        </div>
                        <div className="common-view">
                            <div className="breadcrumb-panel">
                                <ol className="breadcrumb arrow-left">
                                    <li><a href="#">Communication 220</a></li>
                                    <li className="active">TED Topics for an Informative Speech</li>
                                </ol>
                            </div>
                            <div className="description-panel">
                                <p className="title">
                                    <b>Title</b>:
                                    <span>{_that.props.assignment.title}</span>
                                </p>
                                <p className="dueDates font-light">
                                    <b>Due </b>:<span>{_that.props.assignment.startDate}</span>
                                    <b> - </b><span>{_that.props.assignment.endDate}</span>
                                </p>
                                <p>
                                    <b>Learning Objective: </b>
                                    <span>{_that.props.assignment.learningObjective}</span>
                                </p>
                                <p>
                                    <b>Description: </b>
                                    <span>
                                       {_that.props.assignment.description}
                                    </span>
                                </p>
                            </div>

                            <div
                                className={_that.state.uiStates.submissionSelected?"row submission-info col-sm-12":"hidden"}>
                                <div>
                                    <span className="student-avatar">
                                        <img
                                            src={(_that.state.selectedSubmission && _that.state.selectedSubmission.userDetails && _that.state.selectedSubmission.userDetails.avatar && _that.state.selectedSubmission.userDetails.avatar!=="")?_that.state.selectedSubmission.userDetails.avatar:"../app/images/avatar.svg"}/>
                                    </span>

                                    <p>
                                        <b> <span
                                            className="font-light mediaTile"><strong>{(_that.state.selectedSubmission.title && _that.state.selectedSubmission.title !== null && _that.state.selectedSubmission.title !== "" ) ? _that.state.selectedSubmission.title : "."}</strong></span>
                                        </b>
                                    </p>
                                    <br/>
                                    <p>
                                        <span
                                            className="font-light ">{(_that.state.selectedSubmission.description && _that.state.selectedSubmission.description !== null && _that.state.selectedSubmission.description !== "") ? _that.state.selectedSubmission.description : "."}</span>
                                    </p>
                                </div>
                            </div>

                            <div className="common-functionality-panel col-sm-12">
                            </div>
                        </div>
                    </div>
                    <div
                        className={_that.state.uiStates.panelClosed?"hidden":"col-sm-4 no-padding peer-review-panel"}>

                        <div className="review-section">
                            <button className="btn btn-link pull-left close-panel"
                                    onClick={_that.closePanel.bind(_that)}>
                                <span className="reader-only">Close Student Submission Panel</span>
                                <i className="fa fa-times"></i>
                            </button>

                            <div className="submission-tabs">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

}

function mapStateToProps(state) {
    return state
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(actions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Player)

组件包装代码

import React from 'react';
import Player from './app';

import bb from './redux/store'
import Provider from 'react-redux';

class PlayerWrapper extends React.Component {


    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Provider store={bb.store}><Player piToken={this.props.piToken} sectionId={this.props.sectionId}
                                               assignmentId={this.props.assignmentId}
                                               userId={this.props.userId}/></Provider>
        )
    }
}

export default PlayerWrapper;

webpack 构建文件

var webpack = require('webpack');

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-hot-middleware/client',
        './app/PlayerWrapper.js'
    ],
    output: {
        path: require("path").resolve("./dist/app"),
        filename: 'index.js',
        publicPath: '/'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
    module: {
        loaders: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        },
        { test: /\.css$/, loader: ["css-loader","style-loader"] },
        { test: /\.scss$/, loader: "sass-loader" },
        { test: /\.(ttf|eot|svg|eot|woff|otf|png|gif)(\?v)*/, loader: "file-loader?name=fonts/[name].[ext]" }
        ]
    }
};

我刚刚花了一些时间调试这里描述的第二个错误，并在此过程中了解了一些有关 ES6 导入语法的知识。

该行：

从“react-redux”导入连接；

将导入default出口自反应还原图书馆。这是错误的根源：

未捕获的类型错误：（0，_reactRedux2.default）不是一个函数

将其更改为：

import {连接}来自“react-redux”；

将从react-redux库中导入对象named连接在特定情况下是你想要的。注意大括号

查看 MDN 文档here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

我也遇到过与第一个类似的错误：

警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。

当我没有像上面那样正确导入我定义的组件时。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

WEBPACK

babeljs

redux

reactredux

在 React 应用程序中使用使用 React、Redux 和 React-Redux 完成的组件并使用 Webpack 构建时出错的相关文章

Webpack 未将 css 复制到 dist 中

我有以下 css 文件以及以下 webpack 配置 var path require path module exports entry app src index js output path path resolve dirname
在 es6 中使用 jsPDF 和 html2canvas

我正在尝试将 jsPDF 和 html2canvas 与 es6 一起使用我正在导入 html2canvas 和 jsPDF 但在 addHTML 上出现错误当我注释掉 addHTML 时会生成 pdf 有什么线索吗 Thanks j
我应该选择哪个 redux 中间件？

按照指南我发现了一些用于 redux 应用程序的中间件 Redux 重击 https github com gaearon redux thunk Redux 承诺 https github com acdlite redux promi
HTML Webpack 插件将无法编译，因为 Thymeleaf 变量未定义

当 Webpack 编译包含以下 HTML 的应用程序时它会抱怨theme变量未定义这是我的index html file div div 这是我得到的错误 Failed to compile Error in Template exe
React.js - 使用 Enzyme 模拟点击

我有这个 React js 应用程序它是一个简单的购物车应用程序 https codesandbox io s znvk4p70xl https codesandbox io s znvk4p70xl 问题是我正在尝试使用 Jest 和
无法解析源映射...错误：ENOENT：没有这样的文件或目录

问题是当我跑步时yarn start出现一些警告如下 WARNING in node modules usedapp core dist esm src providers transactions reducer js Module Wa
在导出之前将对象分配给变量作为模块默认警告

import axios from axios const baseUrl http localhost 3001 persons const getAll gt return axios get baseUrl const create
本地主机上的连接被拒绝

我正在学校尝试使用我的 NodeJS 和 ReactJS 应用程序但每次运行服务器时都会出现错误localhost PORT net ERR CONNECTION REFUSED wifi 是否拒绝本地主机上的连接 PS 反应端渲染正确
CSS 错误源映射信息在 URL() 声明中不可用（发现孤立 CR，尝试删除CR 选项）

我在项目中执行 NPM start 时遇到问题我收到此错误消息 src assets base scss node modules css loader dist cjs js ref 6 oneOf 5 1 node modules p
在 React 中使用内联样式和纯 CSS 字符串

我正在ReactJS中重写一个基于AngularJS的现有应用程序在应用程序中用户可以提供 CSS 样式字符串来设置某些元素的样式在 AngularJS 中这没有问题我只是将 style 属性设置为给定的字符串在 ReactJS
React Table - useRowSelect 的单选输入

如何在 React Table 中使用单选输入而不是复选框作为可选表有一个复选框但没有单选按钮的示例 https github com tannerlinsley react table blob master examples row
React：自 uuid 起不推荐使用深度需求，请需求顶级模块

我的 React 应用程序成功显示了该按钮但收到此错误 index js 1 深度要求喜欢const uuidv4 require uuid v4 已弃用电子邮件受保护 cdn cgi l email protection 使用 Nod
测试 Redux 组合减速器

假设我有几个减速器功能我将它们全部组合成一个减速器使用combineReducers 有没有办法测试组合减速器实际包含哪些减速器例如如果我有这个 import combineReducers from redux const red
如何：子组件中

在 React 应用程序中使用使用 React、Redux 和 React-Redux 完成的组件并使用 Webpack 构建时出错

在 React 应用程序中使用使用 React、Redux 和 React-Redux 完成的组件并使用 Webpack 构建时出错 的相关文章

在 React 应用程序中使用使用 React、Redux 和 React-Redux 完成的组件并使用 Webpack 构建时出错的相关文章