映射函数不返回渲染 reactjs 中的项目? [英] Map function not return item in render reactjs?

问题描述

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

从'react'导入React；从 'material-ui/TextField' 导入 TextField；变量自我;导出默认类 NewAuthoring 扩展 React.Component {构造函数(道具){超级(道具)；自我=这个；this.state = {样本状态:原始状态"，任务 : [{event:"第一个数据",eventpara:"第一个数据"},{event:"第二个数据",eventpara:"第二个数据"},{event:"第三个数据",eventpara:"第三个数据"}]}}componentWillReceiveProps(nextProps) {控制台日志(nextProps.xml)if(this.props != nextProps) {//当任何道具收到时做某事this.setState({sampleState:nextProps.xml});}}componentWillMount() {//在组件渲染之前做一些事情let xml ="<div type="timeline/slideshow"><section><header></header><article></article></section><section><header>;</header><文章></article></section><section><header></header><article></article></section><section>;<header></header><article></article></section></div>";self.props.getChildXml(xml);}componentDidMount() {//在组件挂载时做一些事情}句柄变化(e){//getChildXml 函数将使用给定的值更新 xml//参数，也会改变xml对话框的值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);}使成为() {const myStyle = {主块:{fontWeight:"粗体",边距:2px"}}const div_style = {边框:'1px纯黑色'，保证金:10}{this.state.task.map((item,contentIndex) => {返回 (<div>你好{item.event}{item.eventpara}</div>)})}}}

任何帮助将不胜感激.

解决方案

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

<代码> {this.state.task.map((item,contentIndex) => {返回 (<div>你好{item.event}{item.eventpara}</div>)})}

或者，您也可以避免使用 {} 括号来返回元素，而无需编写 return 关键字.

<代码>{this.state.task.map((item,contentIndex) => (<div>你好{item.event}{item.eventpara}

))}

更新:你需要从渲染函数返回一些东西

render() {const myStyle = {主块:{fontWeight:"粗体",边距:2px"}}const div_style = {边框:'1px纯黑色'，保证金:10}返回 (<div>{this.state.task.map((item,contentIndex) => {返回 (<div>你好{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 componentwiillrecieveprops. is there any issue by componentwillmount. 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"}
            ]
        }
    }

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

}

Any help will be appreciated.

解决方案

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

这篇关于映射函数不返回渲染 reactjs 中的项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！