您可能返回了未定义、数组或其他一些无效的对象渲染状态数据

在 React 中迭代列表和打印元素时遇到问题.

反应代码是:

从'react'导入反应；从 'react-dom' 导入 ReactDOM；类 NewComponent 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {myData: []}}组件WillMount(){让数据 = document.getElementById('demo').innerHTML;数据 = JSON.parse(数据);this.setState({myData: 数据});}使成为() {返回 this.state.myData.map((item) => {返回 (
<h3>{item.title}</h3><p>{item.description}</p></div>);});}}ReactDOM.render(<新组件/>,document.getElementById('demo'))

我收到以下错误:

bundle.js:830 Uncaught Error: NewComponent.render(): A valid React element(或 null)必须返回.您可能返回了未定义的数组或其他一些无效的对象.

我很确定在渲染函数中的返回有一些问题不过不确定是什么问题.

编辑

我进行了以下编辑，错误不再存在，但没有呈现任何内容.

renderList() {console.log("正在运行");返回 this.state.myData.map((item) => {
<h3>{item.title}</h3><p>{item.description}</p></div>});}使成为() {控制台.log(this.state.myData);如果(this.state.myData.length)return <div>{this.renderList()}</div>别的返回 <div>加载中...</div>}

在 Chrome 控制台中我得到:

(2) [{…}, {…}]0:{_id: {…}，描述:你好"，标题:sankit"}1:{_id:{…}，描述:让我们添加一些新东西"，标题:嗨"}长度:2_proto_:数组(0)跑步

解决方案

你可以做的是从 render 方法中提取你的 js 代码到一个单独的方法中，像这样:

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

然后在你的渲染方法中:

render() {如果(this.state.myData.length){返回 (<div>{this.renderList()}</div>);}别的{返回 (<div>加载中...</div>);}}

Have been facing issue while iterating through a list and printing elements in React.

The React Code is:

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')
 )

And I'm getting an error of:

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.

I'm pretty sure there is some issue with returns in the render function of the Not sure what is the issue though.

EDITS

I have made the following edits, the error is not there anymore but nothing is rendering.

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>
 }

In Chrome console I'm getting:

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

 Running

解决方案

what you can do is extract your js code from the render method in a separate method like so:

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

then in your render method:

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