class LifeCycleComps extends Component { constructor(props) { super(props); this.state = { data: 0, names: [{ name: "sam" }, { name: "hammer" }, { name: "jellyfish" } ] }; //below is sortAlphabet function sortAlphabet = () ={amp}gt; { this.setState({ names: this.state.names.sort() }); }; //sortNames component class SortNames extends Component { render() { return {amp}lt;span {amp}gt; { this.props.names.name } {amp}lt; /span{amp}gt;; } } 
 {amp}lt;button onClick={this.sortAlphabet}{amp}gt;sort{amp}lt;/button{amp}gt; {amp}lt;ul{amp}gt; {this.state.names.map((item, i) ={amp}gt; ( {amp}lt;SortNames key={i} names={item} /{amp}gt; ))} {amp}lt;/ul{amp}gt; 

Arriba está mi código. No estoy seguro de cuál es el problema principal. En el código anterior, quiero obtener los nombres ordenados por onClick . Pero no obtengo ningún resultado positivo del fragmento anterior. Por favor, avíseme amigos, ¿qué hice mal?

No puede usar directamente la función de clasificación en una matriz de objetos. Para eso, debe escribir una función de clasificación o una función de devolución de llamada que pueda modificar según sus necesidades. Aquí está el código de trabajo ( https://stackblitz.com/edit/react-31un7h ):

 import React, { Component } from 'react'; import { render } from 'react-dom'; const SortNames = (props) ={amp}gt; { return ( {amp}lt;span {amp}gt; {props.names.name} {amp}lt;/span{amp}gt; ) } class LifeCycleComps extends Component { constructor(props) { super(props); this.state = { data: 0, names: [{ name: "sam" }, { name: "hammer" }, { name: "jellyfish" } ] }; } compare = ( a, b ) ={amp}gt; { if ( a.name {amp}lt; b.name ){ return -1; } if ( a.name {amp}gt; b.name ){ return 1; } return 0; } //below is sortAlphabet function sortAlphabet = () ={amp}gt; { this.setState({ names: this.state.names.sort(this.compare) }); }; render(){ return ( {amp}lt;div{amp}gt; {amp}lt;button onClick={this.sortAlphabet}{amp}gt;sort{amp}lt;/button{amp}gt; {amp}lt;ul{amp}gt; {this.state.names.map((item, i) ={amp}gt; ( {amp}lt;SortNames key={i} names={item} /{amp}gt; ))} {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; ); } } //sortNames component class App extends Component { constructor() { super(); this.state = { name: 'React' }; } render() { return ( {amp}lt;div{amp}gt; {amp}lt;LifeCycleComps/{amp}gt; {amp}lt;/div{amp}gt; ); } } render({amp}lt;App /{amp}gt;, document.getElementById('root')); 

Aquí hay valores ordenados

 let arr = [{ name: "sam" }, { name: "hammer" }, { name: "jellyfish" }] function sortIt(x,y) { if ( x.name {amp}lt; y.name ){ return -1; } if ( x.name {amp}gt; y.name ){ return 1; } return 0; } arr.sort(sortIt); console.log(arr); 

Y aquí está en reactjs

  sortIt(x,y) { if ( x.name {amp}lt; y.name ){ return -1; } if ( x.name {amp}gt; y.name ){ return 1; } return 0; } sortAlphabet = () ={amp}gt; { this.state.names.sort(this.sortIt) this.setState({ names: this.state.names.sort() }); }; render() { return ( {amp}lt;{amp}gt; {amp}lt;button onClick={this.sortAlphabet}{amp}gt;sort{amp}lt;/button{amp}gt; {amp}lt;ul{amp}gt; {this.state.names.map((item, i) ={amp}gt; ( {amp}lt;li key={i} names={item}{amp}gt;{item.name}{amp}lt;/li{amp}gt; ))} {amp}lt;/ul{amp}gt; {amp}lt;/{amp}gt; ); 

Es solo para adaptar el código de JavaScript proporcionado en los comentarios como a continuación.

 compare = ( a, b ) ={amp}gt; { if ( a.name {amp}lt; b.name ){ return -1; } if ( a.name {amp}gt; b.name ){ return 1; } return 0; } //below is sortAlphabet function sortAlphabet = () ={amp}gt; { let objs = [...this.state.names] //create a copy here as you will not want to directly mutate the state by calling sort. this.setState({ names: objs.sort( compare ); }); }; 

He hecho un StackBlitz en el que puedes ver la solución. Espero que esto ayude.