父组件传递一个对象给子组件,子组件不能访问该对象的属性

#1

父组件

class SendTask extends Component {
render() {
        var search = dataSearch.map(function (item, index) {

            if (item.type === 'input'){
                return <InputBox key={item.key} curItem={item}/>
            }else if(item.type === 'select'){
                return <InputSelector key={item.key} curItem={item}/>
            }else {
                return <RangePicker key={item.key}/>
            }
        },this);
        return(
                
                <div className="condition">
                    {search}
                </div>
          
        );
    }
}

子组件

class InputBox extends Component {

    render() {
        var curItem = this.props.curItem;
        console.log(curItem);
        return(
            <div className="input-box">
                <span>{this.props.curItem.title}</span>
                <input type="text" placeholder={this.props.curItem.placeholder} id={this.props.curItem.id}/>
            </div>
        );
    }
}

如何能够在子组件中通过this.props.curItem.title访问对应的属性,
看了很多博客,上面写的类似于这种父组件向子组件传值的,都是传的简单的字符串类型,在子组件中可以直接打印,直接使用,
像我这种传的对象,在子组件中如果直接打印对象是没有问题的,也就是console.log(this.props.curItem);
如果打印console.log(this.props.curItem.title);
就会报一个 Uncaught TypeError: Cannot read property ‘title’ of undefined 这样的错,是不能直接传对象给子组件吗?求解

#2

我说哥们,是不是有三级以上就无法取到值啊

#3

子组件加上constructor函数试试

class InputBox extends Component {
//加上此函数试试
constructor(props) {
    super(props);
}


render() {
    var curItem = this.props.curItem;
    console.log(curItem);
    return(
        <div className="input-box">
            <span>{this.props.curItem.title}</span>
            <input type="text" placeholder={this.props.curItem.placeholder} id={this.props.curItem.id}/>
        </div>
    );
}
}

#4

ok ,谢了哈,我试一下,看看好不好使

#5

这块也加了 还是报错 报的错是
Uncaught TypeError: Cannot read property ‘title’ of undefined

#6

你这里把它打印了看,剩下的估计就是你数据的问题了

#7

class InputBox extends Component {
constructor(props){
super(props);
}
render() {
var curItem = this.props.curItem;
console.log(curItem);
console.log(item);
console.log(item.title);
return(


{item.title}


);
}
}

这个是打印的结果,单数一旦打印console.log(this.props.curItem.title)就会报错,
其中 console.log(item); 是在子组件中写的死数据

#8
  1. 数据中的key建议是唯一标识,因为它作为子组件的标识了

  2. 你这个打印没看明白,item本就没有定义,打印没有数据。item.title当然也没有定义了

3.我自己试了下,完全可以的呀,代码及效果如下:

class InputBox extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        var curItem = this.props.curItem;
        console.log(curItem);
        console.log(curItem.title);
        return (

            <div>{this.props.curItem.title}</div>


        );
    }

}

const dataSearch = [{title: 'haha', type: 'input', key: '1'}, {title: 'hehe', type: 'input', key: '2'}];


class SendTask extends Component {

    render() {
        var search = dataSearch.map(function(item, index) {

            if (item.type === 'input') {
                return <InputBox key={ item.key }
                curItem = { item }
                />
            } else if (item.type === 'select') {
                return <InputSelector key = { item.key }
                curItem = { item }
                />
            } else {
                return <RangePicker key = { item.key }
                />
            }
        }, this);

        return (

            <div className="condition" > { search } </div>

        );
    }
}


export  default SendTask;

#9

麻烦问下 你写的demo,InputBox组件,是在SendTask组件中写的吗,没有分为两个JS文件吗

#10

我这里是写在一个里面了。可以写一起,也可以分开,看你自己的业务,如果只有SendTask用到InputBox,就写到一个文件里面。如果InputBox其他组件也会用,建议分开,写两个js文件。

#11
import React, {Component} from 'react';
import './InputBox.css';
var item = {
    'type':'input',
    'key':'batch-number',
    "title":"批次编号:",
    "placeholder":"请输入批次编号",
    "id":"batchNumber"
};
class InputBox extends Component {
    constructor(props){
        super(props);
    }
    render() {
        var curItem = this.props.curItem;
        console.log(curItem.title);
        console.log(item);
        console.log(item.title);
        return(
            <div className="input-box">
                <span>{item.title}</span>
                <input type="text" placeholder={item.placeholder} id={item.id}/>
            </div>
        );
    }
}

export default InputBox;
/**
 * Created by lkp on 2017/5/26.
 */
import React, {Component} from 'react';
import InputBox from './../InputBox';
import InputSelector from './../InputSelector';
import { DatePicker } from 'antd';
import DTable from './../DTable';
const { MonthPicker, RangePicker } = DatePicker;
function onChange(date, dateString) {
    console.log(date, dateString);
}
var dataSearch = [
    {
        'type':'input',
        'key':'batch-number',
        "title":"批次编号:",
        "placeholder":"请输入批次编号",
        "id":"batchNumber"
    },
    {
        'type':'select',
        'key':'send-state',
        "title":"发送状态:",
        "id":"sendState",
        "options":[
            "等待发送","正在发送","人工中止","发送完成","已结算"
        ]
    },
    {
        'type':'select',
        'key':'send-type',
        "title":"发送类型:",
        "id":"sendType",
        "options":[
            "马上发送","定时发送"
        ]
    },
    {
        'type':'input',
        'key':'send-content',
        "title":"发送内容:",
        "placeholder":"请输入发送内容",
        "id":"sendContent"
    },
    {
        'type':'input',
        'key':'proxy-account',
        "title":"代理账号:",
        "placeholder":"请输入账号",
        "id":"proxyAccount"
    }
];
class SendTask extends Component {
    render() {
        var search = dataSearch.map(function (item, index) {

            if (item.type === 'input'){
                return <InputBox key={item.key} curItem={item}/>
            }else if(item.type === 'select'){
                return <InputSelector key={item.key} curItem={item}/>
            }else {
                return <RangePicker key={item.key}/>
            }
        },this);
        return(
            <div className="sendTask">
                <div className="title-package">
                    <div className="content-title">发送任务</div>
                    <div className="title-remark">查看发送任务相关的信息,点击导出可导出任务发送号码 并查询发送详情等操作。</div>
                    <hr/>
                </div>
                {/*搜索条件模块*/}
                <div className="condition">
                    {search}
                </div>
                <DTable/>
            </div>
        );
    }
}

export default SendTask;

我的是这个样子的,当在InputBox中打印this.props.curItem.title时 会报错
Uncaught TypeError: Cannot read property ‘title’ of undefined

如果只打印this.props.curItem的话 时正常显示的,所以不是太清楚这是为什么

#12

我找到解决办法了,无意间发现的

class InputBox extends Component {
    constructor(props){
        super(props);
    }
    render() {
        var curItem = this.props.curItem;
        return(
            <div className="input-box">
                <span>{curItem.title.toString()}</span>
                <input type="text" placeholder={curItem.placeholder.toString()} id={curItem.id.toString()}/>
            </div>
        );
    }
}

使用 curItem.title.toString() 就可以了,谢谢你的指点哈,虽然解决了 不过不是太明白原因

#13

解决就好。这么坑。。。,回头研究下

#14

大恩不言谢:rose::rose::rose: