javascript - react 中的排序表。只有一列有效时怎么可能？

Question

我想通过单击表格标题对表格项目(按字母顺序)进行排序。我试过自己做，但效果很奇怪，只有点击第二个标题(优先级)才有效……当我点击第一个和第三个标题时，它会按照表格项目的放置顺序对表格项目进行排序。

我使用 lodash 中的 orderBy。

这是我的代码，完整类的片段。

const header = [
    {name: "Task Name", id: "taskName"},
    {name: "Priority", id: "priority"},
    {name: "Done", id: "done"},
];

        <TableHead>
        <TableRow>
        {header.map((el, i) => (
            <TableCell key={i}>
                <div
                    style={{
                        display: 'flex',
                        alignItems: 'center'
                    }}
                    onClick={() => this.props.handleSort(el.id)}
                >

                    {el.name}
                    {
                        this.props.columnToSort === el.id
                            ? (this.props.sortDirection === 'asc'
                                ? <UpArrow/>
                                : <DownArrow/>
                            )
                            : null
                    }
                </div>
            </TableCell>
        ))}
        <TableCell/>
        </TableRow>
        </TableHead>

不同类中的逻辑，通过 Prop “连接”。

const invertDirection = {
   asc: "desc",
   desc: "asc",
};

class...

state = {
    columnToSort: '',
    sortDirection: 'desc',
};

handleSort = (columnName) => {
    this.setState({
        columnToSort: columnName,
        sortDirection:
            this.state.columnToSort === columnName
                ? invertDirection[this.state.sortDirection]
                : 'asc',
    });
};

props

tableData={orderBy(
                    this.state.tableData,
                    this.state.columnToSort,
                    this.state.sortDirection
                )}
handleSort = {this.handleSort}
columnToSort = {this.state.columnToSort}
sortDirection = {this.state.sortDirection}

我知道它可能难以阅读，因为我有很多组件，但只粘贴了我用来做排序的东西。你能告诉我为什么当点击第二个表头 priority 时排序有效，而当点击其他表头时却不行吗？如果您有更好的排序想法，请告诉我。

Answer 1

希望我了解您的目标，您正在尝试通过单击表格标题来对数据进行排序，并切换它以按升序或降序方式对其进行排序。

如果这是正确的，我会采取更简单的方法。

按动态键排序
您可以创建自己的 Th 组件，该组件将采用 onClick 属性和 id 属性，其中 id是对象键的名称。

当 Th 被点击时，它将调用处理程序并将 id(对象的键)传递给处理程序。
这样您就可以对 child 传递的 key 进行排序。

升序或降序
我们只有 2 个排序选项 - 升序或降序。这意味着我们可以使用 bool 值而不是字符串(这将稍微简化我们的逻辑)。
因此，在每次点击给定的 Th 之后，当键是 的 id 时，我们将在我们的 state 中设置一个新的 bool 对象Th 我们将翻转它的值。
这样我们就可以按给定的键以升序或降序的方式有条件地排序。

这是一个小的运行示例:

const data = [
  { name: 'John', age: 32 },
  { name: 'Mike', age: 27 },
  { name: 'Jane', age: 31 },
  { name: 'Criss', age: 25 },
  { name: 'Tom', age: 18 },
]

class Th extends React.Component {
  handleClick = () => {
    const { onClick, id } = this.props;
    onClick(id);
  }
  render() {
    const { value } = this.props;
    return (
      <th onClick={this.handleClick}>{value}</th>
    )
  }
}

class App extends React.Component {
  state = {
    users: data
  }
  handleSort = (id) => {
    this.setState(prev => {
      return {
        [id]: !prev[id],
        users: prev.users.sort((a, b) => prev[id] ? a[id] < b[id] : a[id] > b[id] )
      }
    });
  }
  render() {
    const { users } = this.state;
    return (
      <table>
        <thead>
          <tr>
            <Th onClick={this.handleSort} id="name" value="Name" />
            <Th onClick={this.handleSort} id="age" value="Age" />
          </tr>
        </thead>
        <tbody>
          {
            users.map(user => (
              <tr>
                <td>{user.name}</td>
                <td>{user.age}</td>
              </tr>
            ))
          }
        </tbody>
      </table>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>