javascript - Map function not return item in render reactjs? - Stack Overflow

admin管理员组

文章数量:1302544

here is code, why my map function not return item in div. I have use array of object in state function. Here is my simple code. I have XML data in ponentwiillrecieveprops. is there any issue by ponentwillmount. I do not understand why map function in map my array of state.

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

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

    ponentWillMount() {
        //Do something before ponent 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);
    }
    
    ponentDidMount() {
        //Do Something when ponent 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>)
            })
        }
    }

}

here is code, why my map function not return item in div. I have use array of object in state function. Here is my simple code. I have XML data in ponentwiillrecieveprops. is there any issue by ponentwillmount. I do not understand why map function in map my array of state.

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

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

    ponentWillMount() {
        //Do something before ponent 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);
    }
    
    ponentDidMount() {
        //Do Something when ponent 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>)
            })
        }
    }

}

Any help will be appreciated.

• javascript
• reactjs

Share Improve this question Follow edited Mar 2, 2018 at 6:55 stackoverhelp asked Mar 2, 2018 at 6:25 stackoverhelpstackoverhelp 6122 gold badges33 silver badges1515 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You are not returning element from map callback. Also i see that tasks is an array of object, and you are directly rendering object by writting {item}. You need to return the element and should avoid rendering object directly like this

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

Alternatively you can also avoid use of {} brackets to return the element without writting return keyword.

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

UPDATE: You need to return something from render function

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

Since the map pattern is very mon in React you could also do something like this:

1: Create a Map/Iterator ponent

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

}

2.return it passing the ponent as props:

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

Because you're returning nothing in render(). Use it as follows:

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

本文标签： javascriptMap function not return item in render reactjsStack Overflow