我如何在 React JS 中使用 Lodash 获取特定数组
How can i get the specific array using Lodash in react js
如何在 React js 中使用 Lodash 获取特定数组?
我有一个对象数组,10 个 topUsers。
data:{
"topUsers":[
{
"user":"foo"
},
{
"user":"bar"
},
{
"user":"mike"
},
{
"user":"jen"
},
{
"user":"carl"
},
{
"user":"ben"
},
{
"user":"tony"
},
{
"user":"mark"
},
{
"user":"peter"
},
{
"user":"jake"
}
]}
我想从前 5 位开始显示,即 "user":"carl",假设 {idx} 是数组
的索引
我正在尝试使用 _.map 来映射数据,但是对于特定的索引或数组我没有任何想法。
<TableBody displayRowCheckbox={false} style={{minHeight: 65}}>
{ _.map(this.state.data.topUsers, (users, idx) => { return(
<TableRow displayBorder={true}>
<TableRowColumn style={{height: 75 , textAlign: 'center'}}>{idx + 1}</TableRowColumn>
<TableRowColumn style={{ justifyContent: 'center', textAlign: 'center' , paddingLeft: '5px' }}>
<Col xs={12}>
<Row>
<Col xs={4} style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
<label style={{whiteSpace: 'normal', overflow: 'hidden', textOverflow: 'ellipsis'}}>
{_.get(users, 'users', ' ')}
</label>
</Col>
</Row>
</Col>
</TableRowColumn>
</TableRow>) })}
你可以试试_.slice(array, [start=0], [end=array.length])
要了解更多信息,请参阅 enter link description here
您可以使用 Array#slice
(或 lodash 的等效项)将数组从索引到末尾切片。因此 arr.slice(4)
,将从第 5 个(基于 0 的)项到末尾创建一个新数组。
顺便说一句 - 如果您想要前 5 个项目,则需要从索引 5 开始切片。从第 4 个索引开始切片将为您提供 6 个项目。
例如:
const topUsers = [{"user":"foo"},{"user":"bar"},{"user":"mike"},{"user":"jen"},{"user":"carl"},{"user":"ben"},{"user":"tony"},{"user":"mark"},{"user":"peter"},{"user":"jake"}];
const result = topUsers.slice(5)
.map(({ user }) => user); // whatever you want to map user into
console.log(result);
在你的情况下:
<TableBody displayRowCheckbox={false} style={{minHeight: 65}}>
{ this.state.data.topUsers.slice(5).map((users, idx) => { return(
<TableRow displayBorder={true}>
<TableRowColumn style={{height: 75 , textAlign: 'center'}}>{idx + 1}</TableRowColumn>
<TableRowColumn style={{ justifyContent: 'center', textAlign: 'center' , paddingLeft: '5px' }}>
<Col xs={12}>
<Row>
<Col xs={4} style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
<label style={{whiteSpace: 'normal', overflow: 'hidden', textOverflow: 'ellipsis'}}>
{_.get(users, 'users', ' ')}
</label>
</Col>
</Row>
</Col>
</TableRowColumn>
</TableRow>) })}
如何在 React js 中使用 Lodash 获取特定数组? 我有一个对象数组,10 个 topUsers。
data:{
"topUsers":[
{
"user":"foo"
},
{
"user":"bar"
},
{
"user":"mike"
},
{
"user":"jen"
},
{
"user":"carl"
},
{
"user":"ben"
},
{
"user":"tony"
},
{
"user":"mark"
},
{
"user":"peter"
},
{
"user":"jake"
}
]}
我想从前 5 位开始显示,即 "user":"carl",假设 {idx} 是数组
的索引我正在尝试使用 _.map 来映射数据,但是对于特定的索引或数组我没有任何想法。
<TableBody displayRowCheckbox={false} style={{minHeight: 65}}>
{ _.map(this.state.data.topUsers, (users, idx) => { return(
<TableRow displayBorder={true}>
<TableRowColumn style={{height: 75 , textAlign: 'center'}}>{idx + 1}</TableRowColumn>
<TableRowColumn style={{ justifyContent: 'center', textAlign: 'center' , paddingLeft: '5px' }}>
<Col xs={12}>
<Row>
<Col xs={4} style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
<label style={{whiteSpace: 'normal', overflow: 'hidden', textOverflow: 'ellipsis'}}>
{_.get(users, 'users', ' ')}
</label>
</Col>
</Row>
</Col>
</TableRowColumn>
</TableRow>) })}
你可以试试_.slice(array, [start=0], [end=array.length])
要了解更多信息,请参阅 enter link description here
您可以使用 Array#slice
(或 lodash 的等效项)将数组从索引到末尾切片。因此 arr.slice(4)
,将从第 5 个(基于 0 的)项到末尾创建一个新数组。
顺便说一句 - 如果您想要前 5 个项目,则需要从索引 5 开始切片。从第 4 个索引开始切片将为您提供 6 个项目。
例如:
const topUsers = [{"user":"foo"},{"user":"bar"},{"user":"mike"},{"user":"jen"},{"user":"carl"},{"user":"ben"},{"user":"tony"},{"user":"mark"},{"user":"peter"},{"user":"jake"}];
const result = topUsers.slice(5)
.map(({ user }) => user); // whatever you want to map user into
console.log(result);
在你的情况下:
<TableBody displayRowCheckbox={false} style={{minHeight: 65}}>
{ this.state.data.topUsers.slice(5).map((users, idx) => { return(
<TableRow displayBorder={true}>
<TableRowColumn style={{height: 75 , textAlign: 'center'}}>{idx + 1}</TableRowColumn>
<TableRowColumn style={{ justifyContent: 'center', textAlign: 'center' , paddingLeft: '5px' }}>
<Col xs={12}>
<Row>
<Col xs={4} style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
<label style={{whiteSpace: 'normal', overflow: 'hidden', textOverflow: 'ellipsis'}}>
{_.get(users, 'users', ' ')}
</label>
</Col>
</Row>
</Col>
</TableRowColumn>
</TableRow>) })}