Javascript 如何在react中将对象数组从父组件传递到子组件

我正在做一个

react

项目

我在父组件中有一个对象数组，现在如何在

react

父组件

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

function App() {
  const students = [
    {
      name: "Mark",
      age: 21
    },
    {
      name: "Williams",
      age: 24
    }
  ]
  return (
    <div className='App'>
      <Child studentsArrayOfObject = { students }></Child>
    </div>
  )
}

export default App

从“React”导入React；
导入“/App.css”；
从“./Child/Child”导入子项；
函数App（）{
康斯特学生=[
{
名称：“马克”，
年龄:21
},
{
姓名：“威廉姆斯”，
年龄:24
}
]
返回(
)
}
导出默认应用程序

子组件

import React from "react";
import "./Child.css";

function Child(props) {
  return (
    <div className="container">
      <div className="row">
        <div className="col-12">
          <div className="Child">
            {props.studentsArrayOfObject.map(student => (
              <li>{student}</li>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Child;

从“React”导入React；
导入“/Child.css”；
功能儿童（道具）{
返回(
{props.studentsArrayOfObject.map（student=>(
{学生}
))}
);
}
导出默认子对象；

您不应该直接打印对象，从对象中获取一些属性，并显示如下所示。例：姓名

{props.studentsArrayOfObject.map(student => <li>{student.name}</li>)}

{props.studentsarayofObject.map（student=>
{student.name}
）}

尝试获取对象的属性并在JSX中呈现。您正在尝试将整个数组呈现为子对象。这是无效的。您应该遍历数组并呈现每个元素。将子组件更改为以下内容 范例

从“React”导入React；
导入“/Child.css”；
功能儿童（道具）{
返回(
{props.studentsArrayOfObject.map（student=>(
{student.name}
{student.age}
))}
)
}
导出默认子对象

您不能只渲染学生对象，我在这里将其更改为

student.name

{/*{props.studentsArrayOfObject.map（student=>(
{学生}
))} */}
{props.studentsArrayOfObject.map（student=>(
{student.name}
))}

---

这是一个在线演示：

它现在显示什么？有错误吗？代码看起来很好，它显示如下错误：错误：对象作为React子对象无效（找到：具有键{name，age}的对象）。如果要呈现子对象集合，请改用数组。

import React from 'react';
import './Child.css';
function Child(props) {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='Child'>
                      {props.studentsArrayOfObject.map(student => (
                        <li key={student.name}>{student.name}</div>
                        <li key={student.age}>{student.age}</div>
                      ))}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Child