Question

在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.

我很确定在渲染功能中返回有一些问题不知道问题是什么。

EDITS

我做了以下编辑，错误不再存在，但没有渲染。

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

Answer 1

你可以做的是用一个单独的方法从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>
    );
  }
}

Answer 2

你可以用div之类的根元素包装它， React ver 15渲染函数仅支持返回一个元素。

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

Answer 3

如此更改，使用map时，应使用key属性作为索引

makeUI() {
        if(!this.state.myData.length)
            return

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

    render() {
        return (<div>
            { this.makeUI() }
            </div>
        )
    }

Answer 4

我认为您缺少renderList-> .map

中的返回值

这应该有效。

renderList() {
    return this.state.myData.map((item) => {
        return (      
            <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>
        );
    }
}

您可能已经返回undefined，数组或其他一些无效对象呈现状态数据

4 个答案: