如何在 React js 中使用 Lodash 获取特定数组答案

【问题标题】：How can i get the specific array using Lodash in react js如何在 React js 中使用 Lodash 获取特定数组
【发布时间】：2017-07-11 03:44:03
【问题描述】：

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

【问题讨论】：

我认为您的 JSON 结构有问题。顶层应该是一个对象，而不是一个数组。
Oppps 抱歉，我现在尝试编辑数据数组 :)

标签： reactjs lodash react-jsx material-ui babeljs

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以试试_.slice(array, [start=0], [end=array.length]) 要了解更多信息，请参阅enter link description here

【讨论】：

嗨，我还是新的 lodash _.slice(idx, start=4, end= ?) 这是正确的吗？
end 是您的 arr 位置（此位置开始 1 而不是 0），例如 var a = [1,2,3,4,5]。 _slice(a, 2,3)，它将返回[3]。