Javascript React JS排序和更新数组

我有一个处理菜单数组排序的函数，但我不知道如何正确编码。我可能遗漏了一些东西，比如地图，但我不确定。单击按钮时，它应更新状态并按字母顺序呈现菜单。我下面的代码在我单击按钮时不会导致任何渲染，因为这两种情况都存在。另外，如何将FetchMenu正确地实现到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>
    )
  }

类菜单过滤器扩展组件{
构造函数（）{
超级（）；
this.state={menus:[]}；
}
handleMenuFetch=e=>{
this.props.fetchMenus（）
};
handleMenuSort=e=>{
this.setState（state=>{
this.state.menus.sort（函数a，b）{
如果（a.nameb.name）{
返回1；
}
返回0；
})
});
}
render（）{
返回(
显示菜单
排序菜单
)
}

问题在于您正在改变状态。一个选项是使用spread运算符创建菜单数组的浅层副本，然后对该数组进行排序

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

this.setState({
菜单：[…this.state.menus].sort（函数（a，b）{
如果（a.nameb.name）{
返回1；
}
返回0；
})
});