Javascript 在 React 渲染中获取 map 返回的数组大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45969531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get size of array returned by map in React render
提问by GluePear
I'm using array.mapin my rendermethod of a React component. It works but I want to know how many rows it's rendering. I'm trying by initialising this.numRows = 0in my constructor, then incrementing it in the mapcallback:
我array.map在我render的 React 组件方法中使用。它有效，但我想知道它渲染了多少行。我正在尝试通过this.numRows = 0在我的构造函数中初始化，然后在map回调中增加它：
<div>
<p>Number of rows = {this.numRows}</p>
{this.state.members.map((member) => {
if (member.display) {
this.numRows++;
return <p>{ member.name }</p>
}
})}
</div>
But this is still showing zero. Full code here: jsfiddle.net/ra13jxak/. How can I show the number of rows returned?
但这仍然显示为零。完整代码在这里：jsfiddle.net/ra13jxak/。如何显示返回的行数？
回答by Michael Horn
You might consider filtering the members you want to display first, then displaying the length of the resulting array, and mapping over it to render the members:
您可以考虑先过滤要显示的成员，然后显示结果数组的长度，并映射到它以呈现成员：
render() {
const membersToRender = this.state.members.filter(member => member.display)
const numRows = membersToRender.length
return (
<div>
<p>Number of rows = {numRows}</p>
{
membersToRender.map((member, index) => {
return <p key={index}>{ member.name }</p>
})
}
</div>
);
}
Edit: Thanks Edgar Henriquez, I fixed the key properties warning as you suggested
编辑：感谢 Edgar Henriquez，我按照您的建议修复了关键属性警告
回答by Danil Speransky
I think it's a good idea to extract it to the component:
我认为将其提取到组件中是个好主意：
class App extends React.Component {
constructor() {
super()
this.state = {
members: [
..
],
visibleMembers() {
return this.members.filter(m => m.display)
}
}
}
render() {
const members = this.state.visibleMembers()
return (
<div>
<p>Number of rows = {members.length}</p>
{members.map(m => <p key={ m.id }>{ m.name }</p>)}
</div>
)
}
}
I've added keyattribute to suppress a warning, you can read more about it on React Documentation.
我添加了key属性来抑制警告，你可以在React Documentation上阅读更多关于它的信息。
回答by Cesar William
You can use filter to generate a new array and then use it to show the number of rows and iterate through it. Like this:
您可以使用 filter 生成一个新数组，然后使用它来显示行数并对其进行迭代。像这样：
const members = this.state.members.filter(member => member.display)
return (
<div>
<p>Number of rows = { members.length }</p>
{members.map(member => <p>{ member.name }</p>)}
</div>
)
回答by Mohammad Zebardast
simply use this :
只需使用这个：
{this.state.members.length}
回答by Muhammad Danial Iqbal
Just use filter on this.state.members on a certain condition which is display attribute in your case
只需在特定条件下在 this.state.members 上使用过滤器，即您的情况下的显示属性
Just have a div wrapped around the elements and get the actually rendered elements count or you can use the use the length method after applying filter having certain conditions.
只需在元素周围包裹一个 div 并获取实际呈现的元素计数，或者您可以在应用具有特定条件的过滤器后使用长度方法。
Implement Render like this:
像这样实现渲染：
render(){
return (
<div>
<p>Number of rows = {this.numRows}</p>
<div id="members-with-display">
{(this.state.members.filter((value)=>{return value.display})).map((member) => {
return <p>{ member.name }</p>
})}
</div>
</div>
);
}
You can have a function to know the rendered rows like:
您可以使用一个函数来了解渲染的行，例如：
getRenderedRows(){
//Either you can use this
return document.getElementById("members-with-display").childElementCount;
// Or this
return this.state.members.filter((value)=>{return value.display}).length;
}
