Estoy tratando de ordenar alfabéticamente la lista de usuarios en mi aplicación, agregando un botón en ReactJS.

La única forma en que puedo hacer que esto funcione es pasar accesorios, pero sé que esto no debe hacerse porque los accesorios no deben mutarse. Necesito ayuda para entender lo que estoy haciendo mal. Este es mi componente de usuarios:

import React from "react"; import { Route, Link } from "react-router-dom"; import User from "./User"; class Users extends React.Component { state = { sort: "asc" }; toggleSort = () ={amp}gt; { const { users } = this.state; this.props.users.sort((a, b) ={amp}gt; a.name.localeCompare(b.name)); this.setState({ users }); }; render() { const { users } = this.state; return ( {amp}lt;div{amp}gt; {this.props.users.map(user ={amp}gt; ( {amp}lt;li key={user.id}{amp}gt; {amp}lt;Link to={`/users/${user.id}`}{amp}gt;{user.name}{amp}lt;/Link{amp}gt; {amp}lt;/li{amp}gt; ))} {amp}lt;button onClick={() ={amp}gt; this.toggleSort(users)}{amp}gt;Sort{amp}lt;/button{amp}gt; {amp}lt;Link to={`/users/new`} /{amp}gt; {amp}lt;/div{amp}gt; ); } } export default Users; 

Esta es la única forma en que puedo hacer que mi botón de clasificación funcione, pero pasando los accesorios … ¿Alguna ayuda? Soy bastante nuevo en React

¡Gracias!

usuario12584890

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.

Si no desea mutar los accesorios, cree una nueva variable:

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

y en su función de renderizado:

 {this.state.users.map(user ={amp}gt; ( {amp}lt;li key={user.id}{amp}gt; {amp}lt;Link to={`/users/${user.id}`}{amp}gt;{user.name}{amp}lt;/Link{amp}gt; {amp}lt;/li{amp}gt; ))} 
 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 = () ={amp}gt; { const { users } = this.state; let newUsers = users.sort((a, b) ={amp}gt; a.name.localeCompare(b.name)); this.setState({ users: newUsers }); }; render() { const { users } = this.state; return ( {amp}lt;div{amp}gt; {users.map(user ={amp}gt; ( {amp}lt;li key={user.id}{amp}gt; {amp}lt;Link to={`/users/${user.id}`}{amp}gt;{user.name}{amp}lt;/Link{amp}gt; {amp}lt;/li{amp}gt; ))} {amp}lt;button onClick={() ={amp}gt; this.toggleSort(users)}{amp}gt;Sort{amp}lt;/button{amp}gt; {amp}lt;Link to={`/users/new`} /{amp}gt; {amp}lt;/div{amp}gt; ); } } export default Users;