如何用数据对表格进行排序

Question

我正在开发一种工具，用户可以输入用户名，然后显示我从 GitHub 获取的关于该特定用户的数据。 即使每个单元格响应排序，它们也只根据第一个单元格对数据进行排序。 如果我单击存储库名称的第一个单元格，我会得到预期的结果，但是当我单击其他单元格时，它们仍然会根据存储库名称单元格进行排序。 我被卡在某个地方，无法真正看到它。 如果您能帮助我向我展示独立排序每个单元格的方法，我将不胜感激。

这是我的代码：

import React, { useState } from 'react';
import { Table } from 'semantic-ui-react';
import _ from 'lodash'
import Moment from 'react-moment';

const UserTable = (props) => {
    const [column, setColumn] = useState(null);
    const [data, setData] = useState();
    const [direction, setDirection] = useState(null);

    const handleSort = (clickedColumn) => () => {

        if (column !== clickedColumn) {

            setColumn(clickedColumn)
            setData(_.sortBy(data, [clickedColumn]))
            setDirection('ascending')
            return
        }
        setData(props.repoData.reverse())
        setDirection(direction === 'ascending' ? 'descending' : 'ascending')
    }



    return (
        <div>
            <Table sortable celled fixed>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell
                            sorted={column === 'name' ? direction : null}
                            onClick={handleSort('name')}
                        >
                            Repository Name
            </Table.HeaderCell>
                        <Table.HeaderCell
                            sorted={column === 'description' ? direction : null}
                            onClick={handleSort('description')}
                        >
                            Description
            </Table.HeaderCell>
                        <Table.HeaderCell
                            sorted={column === 'since' ? direction : null}
                            onClick={handleSort('since')}
                        >
                            Created At
            </Table.HeaderCell>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {props.repoData.map(repos => {
                        return <Table.Row>

                            <Table.Cell>{repos.name}</Table.Cell>
                            <Table.Cell>{repos.description}</Table.Cell>
                            <Table.Cell> <Moment format="DD-MM-YYYY">{repos.created_at}</Moment></Table.Cell>
                        </Table.Row>
                    })}


                </Table.Body>
            </Table>
        </div>
    );
}

export default UserTable;

PS： props.repoData是我从 GitHub 获得的关于该特定用户的数据。

Answer 1

似乎是多个更新的问题，因为setSate是异步的，所以结合起来，state 一起更新。

import React, { useState } from "react";
import { Table } from "semantic-ui-react";
import _ from "lodash";
import Moment from "react-moment";

const UserTable = (props) => {
  const [state, setState] = useState({
    column: null,
    data: null,
    direction: null,
  });
  const { column, data, direction } = state;
  const handleSort = (clickedColumn) => () => {
    if (column !== clickedColumn) {
      setState({
        data: _.sortBy(data, [clickedColumn]),
        column: clickedColumn,
        direction: "ascending",
      });
      return;
    }
    setState({
      data: props.repoData.reverse(),
      column: clickedColumn,
      direction: direction === "ascending" ? "descending" : "ascending",
    });
  };
};

export default UserTable;