Реакция не перерисовывается

Question

У меня есть класс React с функцией сортировки (List) и класс React для простого элемента (Elem). Если начата функция сортировки, она сортирует элементы в массиве в состоянии и перерисовывает список, но остается неизменной, хотя изменен массив в состоянии. Код:

var Elem = React.createClass({ 
    getInitialState() { 
     var elem_name = this.props.name; 
     return { 
      name: elem_name 
     } 
    }, 
    render() { 
     return <div>{this.state.name}</div>; 
    } 
}); 

var List = React.createClass({ 
    getInitialState() { 
     return { 
      received: false, 
      arr: null 
     } 
    }, 
    receiving() { 
     this.setState({ 
      received: true, 
      arr: [1, 2, 3, 4, 5] 
     }); 
    }, 
    sorting(type) { 
     var self = this; 
     return function() { 
      function sort_func() { 
       //sorting... 
      } 
      var main_arr = self.state.arr; 
      main_arr.sort(sort_func); 
      self.setState({ 
       arr: main_arr 
      }) 
     } 
    }, 
    render() { 
     if(this.state.received) { 
      var all_elems = []; 
      this.state.arr.forEach(function(elem) { 
       all_elems.push(<Elem name={elem}>); 
      }); 
      return <div> 
       <button onClick={this.sorting}>Sort</button> 
       {all_elem} 
      </div> 
     } 
     else { 
      this.receiving(); 
      return <div>Empty</div>; 
     } 
    } 
}); 

Например, массив после сортировки - [5, 4, 3, 2, 1]. На первой странице HTML есть

<div>1</div><div>2</div>...<div>5</div>; 

Но после сортировки HTML-страницы не изменилось, хотя изменен массив в состоянии.

Answer 1

Я сделал рефакторинг вашего кода, потому что в вашей версии есть пара ошибок

1. В Elem вам не нужно использовать state,
2. Вместо использования this.receiving(); вы можете добавить исходные данные для arr в getInitialState и избегать использования if/else в render метод
3. Вместо того чтобы использовать this.state.arr.forEach более подходящее использование `.map

4. Вместо var self = this; использовать arrow functions

   var Elem = React.createClass({ 
       render() { 
       return <div>{ this.props.name }</div>; 
       } 
   }); 
   
   var List = React.createClass({ 
       getInitialState() { 
       return { 
        received: false, 
        arr: [1, 2, 3, 4, 5] 
       } 
       }, 
   
       sorting(type) { 
       this.setState({ 
        received: !this.state.received, 
        arr: this.state.arr.sort((a, b) => { 
        return !this.state.received ? b - a : a - b; 
        }) 
       }) 
       }, 
   
       render() { 
       var elements = this.state.arr.map((elem, index) => { 
        return <Elem name={elem} key={index} /> 
       }); 
   
       return <div> 
        <button onClick={this.sorting}>Sort</button> 
        { elements } 
       </div>; 
       } 
   }); 
   

Example