Javascript 按字母顺序排序

我正在尝试按字母顺序排列我的应用程序中的用户列表，在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”导入React；
从“react router dom”导入{Route，Link}；
从“/User”导入用户；
类用户扩展React.Component{
状态={
排序：“asc”
};
切换排序=（）=>{
const{users}=this.state；
this.props.users.sort（（a，b）=>a.name.localeCompare（b.name））；
this.setState（{users}）；
};
render（）{
const{users}=this.state；
返回(
{this.props.users.map（user=>(

{user.name}

))}
this.toggleSort（users）}>Sort
);
}
}
导出默认用户；

这是唯一能让我的排序按钮工作的方法，但是传递道具。。。有什么帮助吗？我还没有反应过来

---

谢谢

如果不想改变道具，请创建一个新变量：

toggleSort=（）=>{
const newUsers={…this.props.users}；
排序（（a，b）=>a.name.localeCompare（b.name））；
this.setState（{users:newUsers}）；
};

在渲染函数中：

{this.state.users.map（user=>(

{user.name}

))}

如果不想改变道具，请创建一个新变量：

toggleSort=（）=>{
const newUsers={…this.props.users}；
排序（（a，b）=>a.name.localeCompare（b.name））；
this.setState（{users:newUsers}）；
};

在渲染函数中：

{this.state.users.map（user=>(

{user.name}

))}

从“React”导入React；
从“react router dom”导入{Route，Link}；
从“/User”导入用户；
类用户扩展React.Component{
//安装组件时设置用户。
组件安装（）{
这是我的国家({
用户：this.props.users
});
}
状态={
用户：[]，
排序：“asc”
};
切换排序=（）=>{
const{users}=this.state；
让newUsers=users.sort（（a，b）=>a.name.localeCompare（b.name））；
this.setState（{users:newUsers}）；
};
render（）{
const{users}=this.state；
返回(
{users.map（user=>(

{user.name}

))}
this.toggleSort（users）}>Sort
);
}
}
导出默认用户
从“React”导入React；
从“react router dom”导入{Route，Link}；
从“/User”导入用户；
类用户扩展React.Component{
//安装组件时设置用户。
组件安装（）{
这是我的国家({
用户：this.props.users
});
}
状态={
用户：[]，
排序：“asc”
};
切换排序=（）=>{
const{users}=this.state；
让newUsers=users.sort（（a，b）=>a.name.localeCompare（b.name））；
this.setState（{users:newUsers}）；
};
render（）{
const{users}=this.state；
返回(
{users.map（user=>(

{user.name}

))}
this.toggleSort（users）}>Sort
);
}
}
导出默认用户