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;
    })
});