Извлечение и сортировка внутри функции реагирования

Question

Итак, у меня есть функция сортировки и кнопка внутри компонента, и, хотя логика сортировки c верна, при нажатии кнопки ничего не отображается, поскольку для меню нет выбора. Кнопка предназначена для сортировки всех карточек меню в алфавитном порядке. Как мне написать этот синтаксис мудрым? Нужно ли мне отображать все карты меню?

Раньше у меня была сортировка с использованием корпуса редуктора и действия, но теперь я хочу сделать это без использования действий или редукторов.

Компонент:

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

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

    handleMenuSort = e => {
      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;
          })
      })};


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

    }

Answer 1

Вместо использования setState используйте this.state для сохранения результата сортировки, а затем используйте setState для повторной визуализации обновленных значений.

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

            return 0;
          });
      this.setState({
            menus
})
};

Answer 2

Вы можете визуализировать свои меню, сопоставляя их в своем блоке jsx:

<Row>
  <div>
    {this.state.menus.map(el) => el.name}
  </div>
</Row>

И убедитесь, что ваш handleMenuFetch заполняет ваши начальные меню, устанавливая состояние, и что для каждого устанавливаемого элемента есть ' name 'property:

handleMenuFetch = e => {
  this.setState({
    menus: [{name: item1}, {name: item2}, {name: item3}, etc...]
  })
};

Answer 3

Попробуйте это

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

            return 0;
          });
      this.setState({
          menus
      })
};