React.js中如何用单个按钮切换原始数组与排序后数组列表展示

• 你当前在render函数中同时渲染了sortedItems和props.menuItems两个列表，没有做展示判断，所以两个列表会同时出现产生叠加效果
• 缺少排序状态切换标记，无法实现点击循环切换的逻辑，也没法控制要展示的列表类型

完整修改后代码如下：

import { Component } from 'react';
import { connect } from 'react-redux';
// 请确保你已经正确引入deleteMenuItem对应的action
import { deleteMenuItem } from '你的action文件路径';

class MenuItems extends Component {
    state = {
        isSorted: false,
        sortedItems: []
    }

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

    menuSort = () => {
        const nextIsSorted = !this.state.isSorted;
        if (nextIsSorted) {
            const ogList = [...this.props.menuItems];
            const sortedList = ogList.sort((a, b) => a.name.localeCompare(b.name));
            this.setState({
                isSorted: nextIsSorted,
                sortedItems: sortedList
            });
        } else {
            this.setState({ isSorted: nextIsSorted });
        }
    };

    render(){
        // 根据isSorted状态决定当前要渲染的列表
        const showList = this.state.isSorted ? this.state.sortedItems : this.props.menuItems;
        return ( 
            <div>
                <button onClick={this.menuSort}>
                    {this.state.isSorted ? '切回原始列表' : '按A-Z排序'}
                </button>
                <ul>
                    {showList.map((item) =>(
                        <li className="list" key={item.id}>
                            {item.name}
                            <br/>
                            {item.body}
                            <br/>
                            <img alt={item.name} src={item.image} />
                            <br/>
                            <button id={item.id} onClick={() => this.handleclick(item)}>delete </button>
                        </li>
                    ))}
                </ul>
            </div>
        )
    }
}

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

1. state新增isSorted布尔标记，用来控制当前展示排序/原始列表
2. menuSort方法新增切换isSorted的逻辑，仅在需要开启排序时生成排序后的列表，避免不必要的计算
3. render中通过状态判断仅渲染一个列表，同一时间不会出现两个列表叠加的问题
4. 修正了React语法规范问题：HTML原生class属性改为React要求的className，补充img标签必填的alt属性，优化标签自闭合写法
5. 可选优化：按钮文案会根据当前状态自动切换，用户感知更清晰

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