如何在reactjs中显示包含列表项（LI）的无序列表（UL）

我的目标是显示一个无序列表（UL），其中包含列表项（LI）。 我已经分享了下面我尝试过的代码。请告诉我的错误。 必须感谢你的帮助。 生成一个错误，如 /src/index.js 第15:21行：“数据”未定义无未定义 第16:11行：“数据”未定义无未定义

DataList.js file:-

import React from 'react';
import ReactDOM from 'reactdom';
function DataList (props) {
<h2>code goes here</h2>
const data = props.data;
const listitems= data.map((data)=>
<li>{data}</li>
)
return(
<ul>
{listitems}
</ul>
)
}
const data = [
{ name: 'Daniel', age: 25 },
{ name: 'John', age: 24 },
{ name: 'Jen', age: 31 },
];


export default DataList;

 
index.js file:-

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import DataList from './DataList';


ReactDOM.render(
<div>
<App/>
<DataList data= {data.name}
data= {data.age}/>
</div>
,document.getElementById('root')
);

DataList.js文件：-
从“React”导入React；
从“ReactDOM”导入ReactDOM；
功能数据列表（道具）{
代码在这里
const data=props.data；
const listitems=data.map（（数据）=>
{data}
)
返回(

{listitems}

)
}
常数数据=[
{姓名：'Daniel'，年龄：25}，
{姓名：约翰，年龄：24}，
{姓名：'Jen'，年龄：31}，
];
导出默认数据列表；
index.js文件：-
从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“/DataList”导入数据列表；
ReactDOM.render(
，document.getElementById（'root'））
);

我注意到的第一个问题是index.js：

从“React”导入React；
从“react dom”导入react dom；
从“/DataList”导入数据列表；
ReactDOM.render(
//不能将“数据”用作道具名称两次！
//您正在传递index.js中不存在的数据
，document.getElementById（'root'））
);

下面是对index.js的一个简单修复：

从“React”导入React；
从“react dom”导入react dom；
从“/DataList”导入数据列表；
//在index.js而不是DataList.js中创建“数据”
常数数据=[
{姓名：'Daniel'，年龄：25}，
{姓名：约翰，年龄：24}，
{姓名：'Jen'，年龄：31}，
];
ReactDOM.render(
//并将整个阵列作为道具传递
，document.getElementById（'root'））
);

---

现在已经处理了，让我们看看DATAIST. JS:

从“React”导入React；
功能数据列表（道具）{
//我不确定这个h2是什么，但它不应该在这里。
代码在这里
//在我们修复了index.js中的道具命名之后，这一行现在就可以了
const data=props.data；
//这是为数组中的每个对象创建
的正确方法。
//但是请注意，对象是作为一个“整体”使用的，您需要它的属性
const listitems=data.map（（data）=>
{data}
）；
返回
{listitems}
；
}
导出默认数据列表；

让我们来解决这个问题，好吗

从“React”导入React；
功能数据列表（道具）{
const data=props.data；
//如果要呈现每个person对象的名称，请执行以下操作：
const nameList=data.map（（person）=>
{person.name}
）；
//如果要渲染每个person对象的年龄，请执行以下操作：
const ageList=data.map（（person）=>
{person.age}
）；
//如果您同时想要姓名和年龄，请执行以下操作：
const personList=data.map（（person）=>(
{`Name:${person.Name}，Age:${person.Age}`}
));
//不要忘记呈现正确的列表！
返回
{nameList | | ageList | | personList}
；
}
导出默认数据列表；

您应该将代码粘贴到问题的代码块中。链接到图像将失败的时间！如果你尝试了一些方法，请提供你得到的错误或一些不想要的结果。请不要期望社区做你的家庭作业。非常感谢@belferink 1996hey belferink 1996…我已经呈现了personList，浏览器中显示的输出类似于Name:${person.Name}，Age:${person.Age}姓名：${person.Name}，年龄：${person.Age}姓名：${person.Name}，年龄：${person.Age}这不应该发生，我误导了你，对不起。粘贴以下行作为修复：

名称：{person.Name}，年龄：{person.Age}

import React from 'react';
import ReactDOM from 'react-dom';
import DataList from './DataList';

ReactDOM.render(
  <div>

    // You cannot use 'data' as a prop name twice !
    // And you're passing data that doesn't exist in index.js
    <DataList data={data.name} data={data.age}/>

  </div>
  ,document.getElementById('root')
);

import React from 'react';
import ReactDOM from 'react-dom';
import DataList from './DataList';

// Create your 'data' in index.js, rather than DataList.js
const data = [
  { name: 'Daniel', age: 25 },
  { name: 'John', age: 24 },
  { name: 'Jen', age: 31 },
  ];

ReactDOM.render(
  <div>

    // And pass the whole Array as a prop
    <DataList data={data} />

  </div>
  ,document.getElementById('root')
);

import React from 'react';

function DataList(props) {
  // I'm not sure what this h2 is, but it's not supposed to be here.
  <h2>code goes here</h2>

  // After we fixed the prop naming in index.js, this line is now fine
  const data = props.data;

  // This is the correct way to create an <li> for each object in our array.
  // But notice that the object is being used as a 'whole', you need it's properties
  const listitems = data.map((data) => <li>{data}</li>);

  return <ul>{listitems}</ul>;
}

export default DataList;

import React from 'react';

function DataList(props) {
  const data = props.data;

  // If you wish to render the names of each person object, do the following:
  const nameList = data.map((person) => <li>{person.name}</li>);

  // If you wish to render the age of each person object, do the following:
  const ageList = data.map((person) => <li>{person.age}</li>);

  // If you want both names, and age do as following:
  const personList = data.map((person) => (
    <li>{`Name: ${person.name}, Age: ${person.age}`}</li>
  ));

  // Don't forget to render the correct list!
  return <ul>{ nameList || ageList || personList }</ul>;
}

export default DataList;