时间戳

首页 > 解决方案 > 如何在 React JS 中使用 _.sortBy 函数对多维数组进行排序？

arrays - 如何在 React JS 中使用 _.sortBy 函数对多维数组进行排序？

问题描述

下面是代码：

import _ from 'lodash'
import React, { Component } from 'react'
import { Table } from 'semantic-ui-react'

const tableData = [
  {
    name: 'John',
    age: 15,
    gender: 'Male',
    "providerExtension":
    {
      name: "true",
      age: 45,
      key: "isEncrypt"
    }

  },
  {
    name: 'Amber',
    age: 42,
    gender: 'Female',
    "providerExtension":
    {
      name: "true",
      age: 15,
      key: "isEncrypt"
    }

  },
  {
    name: 'Leslie',
    age: 25,
    gender: 'Female',
    "providerExtension":
    {
      name: "true",
      age: 25,
      key: "isEncrypt"
    }

  },
  {
    name: 'Ben',
    age: 70,
    gender: 'Male',
    "providerExtension":
    {
      age: 75,
      name: "true",
      key: "isEncrypt"
    }

  },

]
export default class TableExampleSortable extends Component {
  state = {
    column: null,
    data: tableData,
    direction: null,
  }

  handleSort = clickedColumn => () => {
    const { column, data, direction } = this.state

    if (column !== clickedColumn) {
      this.setState({
        column: clickedColumn,
        data: _.sortBy(data, [clickedColumn]),
        direction: 'ascending',
      })

      return
    }

    this.setState({
      data: data.reverse(),
      direction: direction === 'ascending' ? 'descending' : 'ascending',
    })
  }

  render() {
    const { column, data, direction } = this.state

    return (
      <Table sortable celled fixed>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell
              sorted={column === 'name' ? direction : null}
              onClick={this.handleSort('name')}
            >
              Name
                </Table.HeaderCell>
            <Table.HeaderCell
              sorted={column === 'age' ? direction : null}
              onClick={this.handleSort('age')}
            >
              Age
                </Table.HeaderCell>
            <Table.HeaderCell
              sorted={column === 'gender' ? direction : null}
              onClick={this.handleSort('gender')}
            >
              Gender
                </Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {_.map(data, (data) => (
            <Table.Row key={name}>
              <Table.Cell>{data.name}</Table.Cell>
              <Table.Cell>{data.providerExtension.age}</Table.Cell>
              <Table.Cell>{data.gender}</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    )
  }
}

其实我很新反应js。我需要对多维数组进行排序。在上面提到的代码中，我想对嵌套数组 providerExtension.name 中存在的键进行排序。

我不想对 tableData.name 进行排序。

我正在使用 _.sortBy 函数对数组进行排序。任何人都可以帮助我吗？

标签： arraysreactjssortingsemantic-ui

解决方案

您可以使用此解决方案：lodash orderBy on nested property。例如：

this.setState({
    column: clickedColumn,
    data: _.sortBy(data, `providerExtension.${clickedColumn}`),
    direction: 'ascending',
})

参考： 模板文字

推荐阅读