按字母顺序对状态中的项目进行排序

Question

我有一个基于类的React组件，它使用状态项和渲染结果。以下是我如何做到这一点的简短片段：

class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: props.items.edges,
            someItems: props.items.edges,
        }
    }

    render() {
        if (this.state.items.length > 0) {
            return (
                <div className="container">
                    <div className="row">
                        {this.state.someItems.map(({ node }) => {
                            return (
                                <div key={node.id}>
                                    <div>
                                        render some data
                                    </div>
                                </div>

                            )
                        })}
                    </div>
                </div>
            );
        }
    }
}

数据作为数组中的对象接收，如下所示：

我的问题是，在呈现这些项目之前，是否可以按字母顺序对其进行排序？最好的方法是什么？

Answer 1

最好的方法是在将项目设置为状态之前对其进行排序。可以使用内置的Array.prototype.sort方法对项目进行排序。您可以使用String.prototype.localeCompare按字母顺序比较字符串。

我不知道您的数据的预期结构，所以这里有一个通用的解决方案。

class App extends React.Component {
    constructor(props) {
        super(props);

        // Make a copy so as not to modify the original array directly
        const sortedCopy = [...props.items];

        sortedCopy.sort((a, b) => a.name.localeCompare(b.name));

        this.state = {
            items: sortedCopy,
        };
    }

    render() {
        return (
            <div>
                {this.state.items.map((item) => (
                    <p key={item.id}>
                        <div>Item - {item.name}</div>
                    </p>
                ))}
            </div>
        );
    }
}

// Example items prop is out of order
const items = [
    { id: 0, name: "C" },
    { id: 1, name: "B" },
    { id: 2, name: "A" },
    { id: 3, name: "D" },
];

ReactDOM.render(<App items={items} />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>