Question

我将构建系统从webpack移到了gulp，因为我已经厌倦了尝试调试webpack，当我在客户端运行gulp构建系统并运行React时出现了这个错误。我的所有组件都不会因此而加载。

加载一个简单的组件时，我得到一个未被捕获的不变错误

react.js:19500 Warning: lookup(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

加载组件的代码

var require = requirejs


require(['react','react-dom','socket-io','google-api','./components/Action'], function(React,ReactDOM,Action) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".  



    // hand control of the DOM over to react
    ReactDOM.render( <div><Action/></div>, document.getElementById('root')  )

});

组件本身

define(['react'],function(React){

    // this class renders an action item
    // It is a draggable class, but does not handle drags itself
    // STATELESS
    // PROPS
    // * rank - key for sorting order
    // * Content - Content of div
    // * data-id - unique ID for handling drag events
    return ( 
        class Action extends React.Component {

            render() {
                console.log('this is called')
                return (<div className = "action" draggable = "true" data-id = {this.props.dataId} >
                                <p className = "row">{this.props.rank}    </p><p className = "row">{this.props.content}</p>
                        </div>)

            }
        }
    )
})

构建系统的相关部分

// copy the new frontend files and refresh them
gulp.task('frontend', ['sass'], function(){


return gulp.src(patt.frontend, { base: patt.scriptsBase } )
    .pipe(plumber())
    .pipe(babel({
        presets: ['react','es2015']
    }))
    .pipe(gulp.dest('./dest/scripts/'))
    .pipe(livereload())
})

我在Action语句中的console.log()模块中设置了一个断点，这个断点从未被调用过，导致我怀疑永远不会调用render方法。

我怀疑这个错误与定义类的方式或我使用requireJS返回它的方式有关。

以下是带有上下文代码的repo。只需克隆并运行npm install; npm start即可重现此内容。

Answer 1

在这里：

require(['react','react-dom','socket-io','google-api','./components/Action'], function(React,ReactDOM,Action) {

Action实际引用socket-io，它不是有效的React元素，也不是null。

模块的注入顺序与它们的顺序相同。

您可以更改您的依赖顺序，或将您的功能签名更改为：function(React, ReactDOM, socketIo, googleApi, Action)

React渲染组件中未捕获的不变违例

1 个答案: