如何在地图函数中将对象作为道具传递给反应答案

【问题标题】：How to pass an object as props in a map function in react如何在地图函数中将对象作为道具传递给反应
【发布时间】：2017-01-03 15:42:14
【问题描述】：

我正在尝试将道具传递给子组件。我遇到的问题是我要传递的属性之一是一个数组。 registrants 数组如下所示：

{
  name: "Rowan Powell",
  _id: "58658484d139c337601cfb6d",
  updatedOn: "2016-12-29T21:47:48.185Z",
  createdOn: "2016-12-29T21:47:48.185Z"
},
{
  name: "Savannah Powell",
  _id: "58658488d139c337601cfb6e",
  updatedOn: "2016-12-29T21:47:52.145Z",
  createdOn: "2016-12-29T21:47:52.145Z"
}

如果我尝试像下面这样传递注册的道具，我会收到以下错误：

Uncaught (in promise) 错误：对象作为 React 子对象无效（找到：带有键 {name、_id、updatedOn、createdOn} 的对象）。如果你意味着渲染一组孩子，使用数组代替或包装使用 React 附加组件中的 createFragment(object) 的对象。

 return (
        <div>
            {this.state.events.map((event, key) => {
             return (
                    <div key={key}>
                        <Event 
                            title={event.title}
                            date={event.date}
                            time={event.time}
                            description={event.description}
                            presentor={event.presentor}
                            location={event.location}
                            registered={event.registrants}
                            max_reg={event.max_reg}
                            id={event._id} />
                    </div>
                )
            })}
        </div>
    )

【问题讨论】：

似乎错误是在Event 组件的渲染中引发的。能出示一下代码吗？
完美，确实有帮助。我在子组件中发现了错误。谢谢！
this.state.events 应该是数组。并且数组可以包含任何对象。然后你可以在上面使用地图。

标签： javascript arrays json reactjs

【解决方案1】：

为了更有条理，您的组件应该类似于下面的代码。在您的父组件中，您可以运行一个函数，该函数返回您的 Event 子组件的数组。 renderChildren 中的 map 函数将返回一个数组。因此，您可以只返回该函数的结果。如果您有任何问题，请告诉我。

import React from 'react'

// This is your child component:
import Event from './Event'


export default class Parent extends React.Component {
  constructor() {
    super()

    this.state = {events: []}
  }
  renderChildren(events) {
    return events.maps((event, key) => {
      return (
        <div key={key}>
          <Event
            title={event.title}
            date={event.date}
            time={event.time}
            description={event.description}
            presentor={event.presentor}
            location={event.location}
            registered={event.registrants}
            max_reg={event.max_reg}
            id={event._id}
          />
        </div>
      )
    })
  }
  render() {
    return (
      <div className='ParentComponent'>
        {this.renderChildren(this.state.events)}
      </div>
    )
  }
}

【讨论】：

【解决方案2】：

试试这个

this.state= {events: [{
      name: "Rowan Powell",
      _id: "58658484d139c337601cfb6d",
      updatedOn: "2016-12-29T21:47:48.185Z",
      createdOn: "2016-12-29T21:47:48.185Z"
    },
    {
      name: "Savannah Powell",
      _id: "58658488d139c337601cfb6e",
      updatedOn: "2016-12-29T21:47:52.145Z",
      createdOn: "2016-12-29T21:47:52.145Z"
    }]};
    // change key to index
     return (
            <div>
                {this.state.events.map((event, index) => {
                 return (
                        <div key={index}>
                            <Event 
                                title={event.title}
                                date={event.date}
                                time={event.time}
                                description={event.description}
                                presentor={event.presentor}
                                location={event.location}
                                registered={event.registrants}
                                max_reg={event.max_reg}
                                id={event._id} />
                        </div>
                    )
                })}
            </div>
        )

【讨论】：