React JS Сортировка и обновление массива

Question

У меня есть функция для обработки сортировки для моего меню, но я не уверен, как правильно ее кодировать. Я мог бы пропустить что-то вроде карты, но я не уверен. При нажатии кнопки, он должен обновить состояние и отобразить меню в алфавитном порядке. Приведенный ниже код не вызывает ничего при рендеринге, когда я нажимаю кнопку с тех пор. Также, как мне правильно внедрить fetchMenus в функцию handleMenuSort, чтобы она заполняла массив?

Редактировать

class MenuFilter extends Component {
  constructor() {
  super(); 
  this.state = { menus: [] };
}

handleMenuFetch = e => {
    this.props.fetchMenus()
};

handleMenuSort = e => {
  this.setState(state => {
      this.state.menus.sort(function(a, b) {
      if (a.name < b.name) {
        return -1;
      }
      if (a.name > b.name) {
        return 1;
      }

      return 0;
    })
  });
}

render() {
  return (
    <Container>
        <Row>
          <div>
              <button id="menu-show-button" onClick={this.handleMenuFetch}>Show Menus</button>
          </div>
          <div>
              <button id="sort-button" onClick={this.handleMenuSort}>Sort Menus</button>
          </div>
        </Row>
    </Container>
    )
  }

Answer 1

Проблема в том, что вы мутируете государством. Одним из вариантов является создание мелкой копии массива меню с помощью оператора распространения, а затем сортировка этого массива.

this.setState({
    menus: [...this.state.menus].sort(function(a, b) {
      if (a.name < b.name) {
        return -1;
      }
      if (a.name > b.name) {
        return 1;
      }

      return 0;
    })
});