javascript - 如何在 react 中的 map 函数中将对象作为 Prop 传递

Question

我正在尝试将 props 传递给子组件。我遇到的问题是我要传递的属性之一是一个数组。注册者数组如下所示:

{
  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"
}

如果我尝试像下面这样传递已注册的 Prop ，我会收到以下错误:

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {name, _id, updatedOn, createdOn}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

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

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