Question

我正在尝试： 1）创建一个对象数组，其中一个对象是另一个对象数组 2）我想将数据从父级（创建的数组）传递给子级组件，以渲染出数组内部的数据

以下是我创建的数组的父组件DealList.js：

constructor(){
const array = [
            {
                title: 'Picture Max ',
                dealId: 12345,
                publishDate: '14 Sept',
                status: 'Good',
                position: 'Manager',
                sub_Category: [{
                    firstTime: '6:00pm',
                    tableTitle: 'Guidance',
                    company: 'Capcom',
                    tableDetails: [
                        [
                            '53',
                            'CT5+Area',
                            'Benchmarking'
                        ],
                        [
                            'afa445',
                            '3mL 3fmjer',
                            '300'
                        ],
                        [
                            '7Y',
                            '4.3 - 434 Area',
                            '200'
                        ],

                    ]

                }]

 this.state = {

            AccordionData: [...array]


        };

}

//Passing array as props to child component function 
renderDealBoards() {

        return (
            this.state.AccordionData.map((item, key) =>

                (
                    <DBDetails key={item.title} 
                                      item={item}/>

                ))
        );
}

以下是我的子组件DBDetails.js

this.props.item.tableDetails.map((item, key) => (

       <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
           <Row data={this.state.tbHead} style={styles.tbHead}                       textStyle={styles.tbText}/>
 <Rows data={item} textStyle={styles.tbText}/>
      </Table>
           ))

但是，当我运行代码时，会显示以下错误代码：

TypeError: TypeError: Cannot read property 'map' of undefined

任何人都可以帮助我解决出现的问题以及如何克服这个问题，因为我是本机反应的新手，并且刚刚编写代码。

Answer 1

问题是您引用的是this.props.item.tableDetails.map，但是tableDetails在sub_Category属性内，该属性也是一个数组。因此，您应该使用sub_Category.map（x => x.tableDetails.map（// somecode here））映射sub_Category内部的itableDetails。

Answer 2

通过item.sub_category查看此内容，

   <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
     <Row data={this.state.tbHead} style={styles.tbHead} 
          textStyle={styles.tbText}/>
     <Rows data={item.sub_Category} textStyle={styles.tbText}/>
    </Table>

React-Native如何通过props在数组数组内部传递和访问数据

2 个答案: