我如何在React JS中使用Lodash獲取特定的數組

Question

我如何在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>) })}

Answer 1

您可以嘗試_.slice(array, [start=0], [end=array.length])要了解更多信息，請參見此處輸入鏈接描述

Answer 2

您可以使用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>) })}