React+JavaScript如何实现点击按钮按字母序对对象数组按名称排序

核心思路：props传入的菜单项数组为只读属性不可直接修改，我们通过组件内部state存储排序状态和排序后的数组，点击按钮时对原数组拷贝后按name属性做字母序排序，渲染时根据状态选择对应数组渲染即可。

完整修改后代码 #

import { Component } from 'react';
import { connect } from 'react-redux';

class MenuItems extends Component {
  // 初始化内部状态，控制排序开关和存储排序后数组
  state = {
    isSortAZ: false,
    sortedMenuItems: []
  }

  handleClick = (item) => {
    this.props.deleteMenuItem(item.id);
  }

  // 排序按钮点击事件
  handleChange = () => {
    if (!this.state.isSortAZ) {
      // 浅拷贝原数组，避免修改props传入的原始数据
      const copyList = [...this.props.menuItems];
      // 按name属性做字母升序排序
      copyList.sort((a, b) => a.name.localeCompare(b.name));
      this.setState({
        isSortAZ: true,
        sortedMenuItems: copyList
      })
    } else {
      // 再次点击恢复原始排序
      this.setState({
        isSortAZ: false,
        sortedMenuItems: []
      })
    }
  }

  render(){
    // 选择要渲染的数组
    const renderList = this.state.isSortAZ ? this.state.sortedMenuItems : this.props.menuItems;
    return ( 
      <div>
        <button onClick={this.handleChange}>filter a to z</button>
        {renderList.map((item) =>(
          <li className="list" key={item.id}>
            {item.name}
            <br />
            {item.body}
            <br />
            <img src={item.image} alt={item.name} />
            <br />
            <button id={item.id} onClick={() => this.handleClick(item)}>delete </button>
          </li>
        ))}
      </div>
    )
  }
}

export default connect(null, {deleteMenuItem})(MenuItems)

关键改动说明 #

• 新增组件内部state：isSortAZ控制排序开关，sortedMenuItems存储排序后的数组，避免直接修改props传入的原始数据
• 实现handleChange排序方法：点击按钮时先对原数组做浅拷贝，再调用localeCompare方法实现字母序排序，更新state后触发组件重渲染
• 修复原有代码语法问题：将HTML属性class改为React规范的className，<img>标签补全alt属性并改为自闭合格式，补全之前未定义的排序按钮点击事件
• 渲染逻辑优化：根据排序状态动态选择渲染的数组，同时支持点击按钮切换排序/原始顺序

可选优化 #

如果需要忽略大小写做排序，可以将排序逻辑修改为：
copyList.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))

内容的提问来源于stack exchange，提问作者sam