Aquí está el código, por qué mi función de mapa no devuelve el elemento en div. Tengo uso de matriz de objeto en función de estado. Aquí está mi código simple. Tengo datos XML en componentwiillrecieveprops . ¿hay algún problema por componentwillmount ? No entiendo por qué la función de mapa en el mapa de mi matriz de estado.

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

}

Cualquier ayuda será apreciada.

1
stackoverhelp 2 mar. 2018 a las 09:25

3 respuestas

La mejor respuesta

No está devolviendo el elemento de la devolución de llamada map. También veo que tasks es una matriz de objetos, y usted está representando el objeto directamente escribiendo {item}. Debe devolver el elemento y debe evitar representar el objeto directamente así

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

Alternativamente, también puede evitar el uso de los corchetes {} para devolver el elemento sin escribir la palabra clave return.

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

ACTUALIZACIÓN: debe devolver algo de la función de representación

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>
        )
    }
3
Prakash Sharma 2 mar. 2018 a las 06:59

Dado que el patrón de mapa es muy común en React, también podría hacer algo como esto:

1: Crear un componente de Mapa / Iterador

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

}

2. devuélvelo pasando el componente como accesorios:

 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>                           
                />              
      }
0
Miguel Giménez 2 mar. 2018 a las 08:13

Porque no devuelve nada en render(). Úselo de la siguiente manera:

render(){
    return(
        {this.state.task.map((item,contentIndex) => {
                return <SomeElement />;
         }
    );
}
0
Amanshu Kataria 2 mar. 2018 a las 08:23