如何用数据对表进行排序

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 是异步的，所以组合，状态更新在一起。

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;