javascript - 您可能返回了未定义，数组或其他一些无效的对象呈现状态数据

在React中遍历列表和打印元素时遇到了问题。

React代码是：

import React from 'react';
import ReactDOM from 'react-dom';

class NewComponent extends React.Component {
    constructor(props){
        super(props);
        this.state = {myData: []}
    }

    componentWillMount(){
        let data = document.getElementById('demo').innerHTML;
        data = JSON.parse(data);
        this.setState({myData: data});
    }

    render() {
        return this.state.myData.map((item) => {
        return (
            <div>
                <h3>{item.title}</h3>
                <p>{item.description}</p>
            </div>
            );
         });
       }
     }


ReactDOM.render(
    <NewComponent />,
    document.getElementById('demo')
 )

我收到以下错误：

bundle.js:830 Uncaught Error: NewComponent.render(): A valid React element
(or null) must be returned. You may have returned undefined, an array or
some other invalid object.

我很确定在render函数的返回值中存在一些问题
不知道是什么问题。

编辑

我进行了以下编辑，该错误不再存在，但没有任何渲染。

renderList() {
console.log("Running");
return  this.state.myData.map((item) => {
    <div>
      <h3>{item.title}</h3>
      <p>{item.description}</p>
    </div>
  });
}

render() {
    console.log(this.state.myData);
    if(this.state.myData.length)
        return <div>{this.renderList()}</div>
    else
        return <div>Loading...</div>
 }

在Chrome控制台中，我得到：

(2) [{…}, {…}]
 0:{_id: {…}, description: "hello", title: "sankit"}
 1:{_id: {…}, description: "lets add some thing new", title: "hi"}
 length:2
 _proto_:Array(0)

 Running

最佳答案

您可以做的是从render方法中以单独的方法提取js代码，如下所示：

renderList() {
   return this.state.myData.map((item) => {
      <div>
       <h3>{item.title}</h3>
       <p>{item.description}</p>
      </div>
   })
}

然后在您的渲染方法中：

render() {
  if(this.state.myData.length){
    return (
       <div>{this.renderList()}</div>
    );
  }
  else
  {
    return (
      <div>Loading...</div>
    );
  }
}

关于javascript - 您可能返回了未定义，数组或其他一些无效的对象呈现状态数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45908668/