将对象数组从父组件传递到子组件

Question

这是一个非常简单的 react 应用，只有 App 组件和 Child 组件。我正在使用父组件中的 .map 函数将对象单独传递给子组件。每个对象都在子（控制台）中接收，但我无法让对象字段在浏览器或控制台上输出/显示，它只是显示为空白屏幕，也没有显示任何错误。

每个人都收到了，但个别字段不能像子组件中的 {person.Name} 那样访问，我也尝试过破坏道具，仍然不起作用

我看过其他问题 Passing data from Parent Component to Child Component

How to pass Array of Objects from Parent Component to Child Component in react

在问这个问题之前，我已经在网上搜索了很多解决方案

父组件

import React from 'react'
import './App.css';
import Child from './Child'

function App() {

  let persons = [
                {
                  Name: 'Bill Gates',
                  id: 432,
                  Place: 'USA'
                },
                {
                  Name: 'Danny Archer',
                  id: 34,
                  Place: 'Blood Diamond'
                },
                {
                  Name: 'Iphone X',
                  id: 2018,
                  Place: 'USA'
                },
                {
                  Name: 'React App',
                  id: 111,
                  Place: 'Front End Programming'
                },
                {
                  Name: 'Honda CBR 600RR',
                  id: 100,
                  Place: 'Bike'
                },
  ]


   console.log(persons);

  return (
    <div className="App">
      {
        persons.map(person=>(<Child person = {person} key={person.id}/>))
      }
      
    </div>
  );
  }

export default App;

子组件

import React from 'react'

function Child(person) {

    // console.log(person)
    
  return (
    <div >
      <h1>{person.Name}</h1>
    </div>
  )
}

export default Child

Answer 1

Props 是一个对象，而不是您期望的确切值

import React from 'react'

/// change this line
function Child({person}) {

    // console.log(person)
    
  return (
    <div >
      <h1>{person.Name}</h1>
    </div>
  )
}

export default Child

---

在您的代码中，function Child(person) 这个人，是一个包含你传递的道具的对象，例如Child(person={person} someData={someData})

所以，person 函数中的参数将是

{
   person: person,
   someData: someData
}

Answer 2

如果你在子组件中 console.log 人，你会得到：

person: { person: { name, id, place }}

因为第一个参数会从父级获取所有属性。

所以不要这样做 --> function Child(person)，你可以这样做 --> function Child({person})。所以这将解构你的道具对象并且你会得到你的人对象！