如何在 React 中渲染对象数组？
Posted
技术标签:
【中文标题】如何在 React 中渲染对象数组？【英文标题】：How to render an array of objects in React? 【发布时间】：2017-05-13 11:25:25 【问题描述】：能否请您告诉我如何在 react js 中呈现列表。 我喜欢这个
https://plnkr.co/edit/X9Ov5roJtTSk9YhqYUdp?p=preview
class First extends React.Component
constructor (props)
super(props);
render()
const data =["name":"test1","name":"test2"];
const listItems = data.map((d) => <li key=d.name>d.name</li>;
return (
<div>
hello
</div>
);
【问题讨论】：
嗨，我用谷歌搜索了很多这样的文章：jasonjl.me/blog/2015/04/18/… 嗯...您共享的 plnkr 应用程序对我不起作用.. 【参考方案1】：您可以通过两种方式做到这一点：
第一：
render()
const data =["name":"test1","name":"test2"];
const listItems = data.map((d) => <li key=d.name>d.name</li>);
return (
<div>
listItems
</div>
);
二：直接在return中写map函数
render()
const data =["name":"test1","name":"test2"];
return (
<div>
data.map(function(d, idx)
return (<li key=idx>d.name</li>)
)
</div>
);
【讨论】：
请分享plunker 是的，正在努力，你的 plunker 中没有包含 babel 请告诉我如何在 plunker 中包含 babel 这是一个有效的 plnkr plnkr.co/edit/kFKBi8qUAC02eeHOYUB3?p=preview 似乎不需要在 plnkr 中包含 babel 不要使用 idx（循环索引）作为 JSX 元素的关键属性以避免出现问题。阅读此reactjs.org/docs/lists-and-keys.html#keys。相反，idx 使用了一些d.id。【参考方案2】：
https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions
您可以将任何 JavaScript 表达式作为子表达式传递，方法是将其包含在 中。例如，这些表达式是等价的：
<MyComponent>foo</MyComponent> <MyComponent>'foo'</MyComponent>这对于呈现任意长度的 JSX 表达式列表通常很有用。例如，这会呈现一个 HTML 列表：
function Item(props) return <li>props.message</li>; function TodoList() const todos = ['finish doc', 'submit pr', 'nag dan to review']; return ( <ul> todos.map((message) => <Item key=message message=message />) </ul> );
class First extends React.Component
constructor(props)
super(props);
this.state =
data: [name: 'bob', name: 'chris'],
;
render()
return (
<ul>
this.state.data.map(d => <li key=d.name>d.name</li>)
</ul>
);
ReactDOM.render(
<First />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>【讨论】：
【参考方案3】：Shubham 的回答很好地解释了。这个答案是对它的补充，以避免一些陷阱并重构为更易读的语法
陷阱：在渲染对象数组时存在常见的误解，尤其是在对数据执行更新或删除操作时。用例就像从表行中删除一个项目。有时，当预期被删除的行没有被删除，而是其他行被删除时。
要避免这种情况，请在根元素中使用 key 属性，该属性在 .map() 的 JSX 树中循环。此外，添加 React 的 Fragment 将避免在通过调用方法呈现时在 ul 和 li 之间添加另一个元素。
state =
userData: [
id: '1', name: 'Joe', user_type: 'Developer' ,
id: '2', name: 'Hill', user_type: 'Designer'
]
;
deleteUser = id =>
// delete operation to remove item
;
renderItems = () =>
const data = this.state.userData;
const mapRows = data.map((item, index) => (
<Fragment key=item.id>
<li>
/* Passing unique value to 'key' prop, eases process for virtual DOM to remove specific element and update HTML tree */
<span>Name : item.name</span>
<span>User Type: item.user_type</span>
<button onClick=() => this.deleteUser(item.id)>
Delete User
</button>
</li>
</Fragment>
));
return mapRows;
;
render()
return <ul>this.renderItems()</ul>;
重要：决定使用哪个值我们应该传递给key 属性也很重要，因为常见的方法是使用.map() 提供的index 参数。
TLDR;但是它有一个缺点并尽可能避免它并使用来自正在迭代的数据的任何唯一id，例如item.id。有一篇很好的文章 - https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
【讨论】：
为什么不把键放在 元素中而不是包装在import React from 'react';
class RentalHome extends React.Component
constructor()
super();
this.state =
rentals:[
_id: 1,
title: "Nice Shahghouse Biryani",
city: "Hyderabad",
category: "condo",
image: "http://via.placeholder.com/350x250",
numOfRooms: 4,
shared: true,
description: "Very nice apartment in center of the city.",
dailyPrice: 43
,
_id: 2,
title: "Modern apartment in center",
city: "Bangalore",
category: "apartment",
image: "http://via.placeholder.com/350x250",
numOfRooms: 1,
shared: false,
description: "Very nice apartment in center of the city.",
dailyPrice: 11
,
_id: 3,
title: "Old house in nature",
city: "Patna",
category: "house",
image: "http://via.placeholder.com/350x250",
numOfRooms: 5,
shared: true,
description: "Very nice apartment in center of the city.",
dailyPrice: 23
]
render()
const rentals = this.state;
return(
<div className="card-list">
<div className="container">
<h1 className="page-title">Your Home All Around the World</h1>
<div className="row">
rentals.map((rental)=>
return(
<div key=rental._id className="col-md-3">
<div className="card bwm-card">
<img
className="card-img-top"
src=rental.image
alt=rental.title />
<div className="card-body">
<h6 className="card-subtitle mb-0 text-muted">
rental.shared rental.category rental.city
</h6>
<h5 className="card-title big-font">
rental.title
</h5>
<p className="card-text">
$rental.dailyPrice per Night · Free Cancelation
</p>
</div>
</div>
</div>
)
)
</div>
</div>
</div>
)
export default RentalHome;
【讨论】：
【参考方案5】：试试这个：
class First extends React.Component
constructor (props)
super(props);
render()
const data =["name":"test1","name":"test2"];
const listItems = data.map((d) => <li key=d.name>d.name</li>;
return (
<div>
listItems
</div>
);
【讨论】：
【参考方案6】：在 app.js 文件中试试下面这段代码，很容易理解
function List()
var nameList = [
id: "01", firstname: "Rahul", lastname: "Gulati" ,
id: "02", firstname: "Ronak", lastname: "Gupta" ,
id: "03", firstname: "Vaishali", lastname: "Kohli" ,
id: "04", firstname: "Peter", lastname: "Sharma"
];
const itemList = nameList.map((item) => (
<li>
item.firstname item.lastname
</li>
));
return (
<div>
<ol style= listStyleType: "none" >itemList</ol>
</div>
);
export default function App()
return (
<div className="App">
<List />
</div>
);
【讨论】：
以上是关于如何在 React 中渲染对象数组？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 React 的 API 中渲染嵌套在对象中的数组中的数据？