javascript - 在reactJS中按字母顺序排序

Question

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

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

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;

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

谢谢!

Answer 1

如果您不想改变 Prop ，请创建一个新变量:

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>
))}