如何在React中的地圖函數中將對象作為道具傳遞

Question

我正在嘗試將道具傳遞給子組件。 我得到的問題是我要傳遞的屬性之一是數組。 注冊者數組如下所示：

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

如果我嘗試通過注冊的道具，如下所示，則會出現以下錯誤：

未捕獲（承諾）錯誤：對象作為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>
    )

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

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