必须返回有效的 ReactComponent.您可能返回了未定义的数组或其他一些无效对象

A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object

本文关键字：返回 其他 数组 无效 未定义 对象 有效 ReactComponent      更新时间：2023-09-26

我正在构建一个小的反应js应用程序，我得到这个错误：

未捕获的错误：不变冲突：export.render（）：有效的 必须返回 ReactComponent。您可能返回了未定义、 数组或其他一些无效对象。

这些是我的源文件： App.jsx

var React = require('react');
var Chats = require('./chats');
var messages = {
  chatMessages: [{
    name: ' John Doe',
    message: ' Hey Lisa, how are you doing?'
  },{
    name: 'Lisa Johnson',
    message: 'Pretty good, how are you?'
  }]
}
var App = React.createElement(Chats, messages)
React.render(App, document.querySelector('.container'));

聊天.jsx

var React = require ('react');
var Chat = require ('./chat');
var Chats = React.createClass({
  render:function(){
    var chats = this.props.chatMessages.map(function(chatProps){
      return <Chat {...chatProps} />
    });
    return (
      <div>
        {chats}
      </div>
    )
  }
});
module.exports = Chats;

和聊天.jsx

var React = require ('react');
var Chat = React.createClass ({
  render:function (){
  return
    <div>
      <p>{this.props.name}</p>
      <span> {this.props.message} </span>
    </div>
}
});
module.exports = Chat;

我认为问题出在我的地图功能上，但我真的希望有人告诉我我在哪里犯了错误。

我从GitHub下载了你的代码。正如我所怀疑的那样，问题是将组件包装在return的括号中.从上面更新的代码中，您没有在Chat组件上执行此操作。这是必要的，因为转换后的React.createElement值将驻留在return之后的下一行，永远不会实际运行。以下是更改后的函数：

var Chat = React.createClass({
  render: function () {
    return (
      <div>
        <p>{this.props.name}</p>
        <span> {this.props.message} </span>
      </div>
    );
  }
});

此外，就其价值而言，您的App组件是多余的。你可以这样做：

React.render( <Chats {...messages} />, document.querySelector( '.container' ) );
相关文章：