Я пытаюсь отсортировать по алфавиту список пользователей в моем приложении, добавив кнопку в ReactJS.

Единственный способ получить эту работу — пропускать реквизит, но я знаю, что этого нельзя делать, потому что реквизит не должен изменяться. Нужна помощь, чтобы понять, что я делаю неправильно. Это мой компонент Users:

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; 

Это единственный способ заставить мою кнопку сортировки работать, но пропуская опоры … Любая помощь? Я довольно новичок в React

Благодарность!

user12584890

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

Если вы не хотите мутировать реквизиты, создайте новую переменную:

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

и в вашей функции рендеринга:

 {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;