在 reactJS 中按字母顺序排序答案

【问题标题】：Sorting alphabetically in reactJS在 reactJS 中按字母顺序排序
【发布时间】：2019-12-23 13:28:19
【问题描述】：

我正在尝试按字母顺序对我的应用中的用户列表进行排序，在 ReactJS 中添加一个按钮。

我可以让这个工作的唯一方法是传递道具，但我知道不能这样做，因为道具不应该被改变。需要一些帮助来理解我做错了什么。这是我的用户组件：

import React from "react";
import { Route, Link } from "react-router-dom";
import User from "./User";

class Users extends React.Component {
  state = {
    sort: "asc"
  };

  toggleSort = () => {
    const { users } = this.state;
    this.props.users.sort((a, b) => a.name.localeCompare(b.name));
    this.setState({ users });
  };

  render() {
    const { users } = this.state;

    return (
      <div>
        {this.props.users.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.name}</Link>
          </li>
        ))}
        <button onClick={() => this.toggleSort(users)}>Sort</button>

        <Link to={`/users/new`} />
      </div>
    );
  }
}

export default Users;

这是我可以让我的排序按钮工作的唯一方法，但是传递道具......有什么帮助吗？我对 React 很陌生

谢谢！

【问题讨论】：

标签： javascript reactjs sorting

【解决方案1】：

如果您不想改变 props，则创建一个新变量：

toggleSort = () => {
  const newUsers = { ...this.props.users };
  newUsers.sort((a, b) => a.name.localeCompare(b.name));
  this.setState({ users: newUsers });
};

在你的渲染函数中：

{this.state.users.map(user => (
  <li key={user.id}>
    <Link to={`/users/${user.id}`}>{user.name}</Link>
  </li>
))}

【讨论】：

【解决方案2】：

import React from "react";
import { Route, Link } from "react-router-dom";
import User from "./User";

class Users extends React.Component {

  // set users when component mounted.
  componentDidMount () {
    this.setState({
      users: this.props.users
    });
  }

  state = {
    users: [],
    sort: "asc"
  };

  toggleSort = () => {
    const { users } = this.state;
    let newUsers = users.sort((a, b) => a.name.localeCompare(b.name));
    this.setState({ users: newUsers });
  };

  render() {
    const { users } = this.state;

    return (
      <div>
        {users.map(user => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.name}</Link>
          </li>
        ))}
        <button onClick={() => this.toggleSort(users)}>Sort</button>

        <Link to={`/users/new`} />
      </div>
    );
  }
}

export default Users;

【讨论】：