[英]React JS Sorting and updating Array
我有一个处理菜单数组排序的函数,但我不确定如何正确编码。 我可能会遗漏地图之类的东西,但我不确定。 单击按钮时,它应该更新状态并呈现按字母顺序排序的菜单。 当我单击按钮时,我下面的代码不会导致任何渲染。 另外我将如何正确地将 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>
)
}
问题是你正在改变状态。 一种选择是使用扩展运算符制作菜单数组的浅表副本,然后对该数组进行排序。
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;
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.