map函数不返回render reactjs中的项目？

Question

这里是代码，为什么我的map函数不返回div中的项目。我在状态函数中使用了对象数组。这是我的简单代码。我在componentwiillrecieveprops中有XML数据。是否有任何问题由componentwillmount。我不明白为什么map函数在map我的数组状态。

import React from 'react';
import TextField from 'material-ui/TextField';
var self;

export default class NewAuthoring extends React.Component {
    constructor(props) {
        super(props);
        self = this;
        this.state = {
            sampleState : "OriginalState",
            task : [
                {event:"First data",eventpara:"First Data"},
                {event:"Second data",eventpara:"Second Data"},
                {event:"Third data",eventpara:"Third Data"}
            ]
        }
    }

    componentWillReceiveProps(nextProps) {
        console.log(nextProps.xml)
        if(this.props != nextProps) {
            //Do Something when any props recieve
            this.setState({sampleState:nextProps.xml});
        }
    }

    componentWillMount() {
        //Do something before component renders
        let xml ="<div type=”timeline/slideshow”><section><header></header><article></article></section><section><header></header><article></article></section><section><header></header><article></article></section><section><header></header><article></article></section></div>";
        self.props.getChildXml(xml);
    }
    
    componentDidMount() {
        //Do Something when component is mounted

    }

    handleChange(e) {
        //getChildXml function will update the xml with the given 
        //parameter and will also change the xml dialog value
        let xml ="<div type=”timeline/slideshow”><section><header></header><article></article></section><section><header></header><article></article></section><section><header></header><article></article></section><section><header></header><article></article></section></div>";
        self.props.getChildXml(xml);
    }

    render() {
        const myStyle = {
            mainBlock:{
                fontWeight:"bold",
                margin:"2px"
            }
        }
        const div_style = {
            border:'1px solid black',
            margin:10
        }
        {
            this.state.task.map((item,contentIndex) => {
                return (<div>
                    hello
                    {item.event}
                    {item.eventpara} 
                </div>)
            })
        }
    }

}

任何帮助将不胜感激。

Answer 1

你没有从map回调中返回元素。另外我看到tasks是一个对象数组，你通过写{item}直接渲染对象。您需要返回元素，并且应该避免像这样直接渲染对象

           {
                this.state.task.map((item,contentIndex) => {
                    return (<div>
                        hello
                        {item.event}
                        {item.eventpara} 
                    </div>)
                })
            }

或者，您也可以避免使用{}括号返回元素而不写入return关键字。

{
   this.state.task.map((item,contentIndex) => (
     <div>
        hello
        {item.event}
        {item.eventpara} 
     </div>
   ))
}

更新：您需要从渲染功能返回一些东西

render() {
        const myStyle = {
            mainBlock:{
                fontWeight:"bold",
                margin:"2px"
            }
        }
        const div_style = {
            border:'1px solid black',
            margin:10
        }

        return (
          <div>
          {
            this.state.task.map((item,contentIndex) => {
                return (<div>
                    hello
                    {item.event}
                    {item.eventpara} 
                </div>)
            })
          }
          </div>
        )
    }

Answer 2

由于地图模式在React中非常常见，您还可以执行以下操作：

1：创建Map / Iterator组件

const Iterator = (props) => {
  //you could validate proptypes also...
  if(!props.array.length) return null
  return props.array.map(element => props.component(element))

}

2.返回将组件作为道具传递：

 render() {
        const myStyle = {
            mainBlock:{
                fontWeight:"bold",
                margin:"2px"
            }
        }
        const div_style = {
            border:'1px solid black',
            margin:10
        }
        return <Iterator
                   array={this.state.task}
                   component={ 
                   item=>(<div key={item.event}>hello{item.event} 
                   {item.eventpara} } </div>                           
                />              
      }

Answer 3

因为你在render()什么也没有回来。使用方法如下：

render(){
    return(
        {this.state.task.map((item,contentIndex) => {
                return <SomeElement />;
         }
    );
}