映射函数在渲染 reactjs 中不返回项目？

Question

这里是代码，为什么我的地图函数不返回 div 中的项目。 我在状态函数中使用了对象数组。 这是我的简单代码。 我在 componentwiillrecieveprops 中有 XML 数据。 componentwillmount 是否有任何问题。我不明白为什么 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.return 它作为 props 传递组件：

 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 />;
         }
    );
}