ReactJS: сортировка массива данных из состояния, которое передается компоненту в качестве реквизита

Question

Я работаю над приложением React и использую Redux для хранения состояния. У меня есть следующие данные.

menu.data. js:

export default [
    {
        "_id": "c0daac6ab8954a40606dd8b81d24a0ef",
        "name": "Entree",
        "rank": "0",
        "items": [
            {
                "title": "Curry Puffs",
                "price": 14,
                "_id": "615caa7dd573bcf84781c9e4382b520d"
            },
            {
                "title": "Spring Rolls",
                "price": 12,
                "_id": "542f711856b7854b71d9862797620e23"
            },
            {
                "title": "Tandoori Cauliflower",
                "price": 20,
                "_id": "f0c0f2fa02e392ad4e74dfaaf6068fb1"
            }
        ]
    },
    {
        "_id": "934aeba1e96e6d6a4207cd5ba207b52a",
        "name": "Lunch",
        "rank": "1",
        "items": [
            {
                "title": "Spaghetti",
                "price": 20,
                "_id": "db414e2b9951ed621fbf6fb40df36ee3"
            },
            {
                "title": "Spaghetti",
                "price": 20,
                "_id": "253592733a8f7835f390d3d9ed8bda95"
            },
            {
                "title": "Spaghetti",
                "price": 20,
                "_id": "a22741f27a346cda93d3cf752e371779"
            }
        ]
    }
]

У меня есть следующий компонент:

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

import MenuCategory from '../../components/menu-category/menu-category.component'
import NewCategoryButton from '../../components/new-category-button/new-category-button.component';

import './menu.styles.scss';

const MenuPage = props => {

    console.log("Printing the menu");
    console.log(props.menu);

    const menuItems = props.menu;
    menuItems.sort((a,b) => (a.rank < b.rank) ? 1 : -1);

    console.log("After sorting the items");
    console.log(menuItems);

    return (
        <div className='menu-page'>
            {props.menu ? props.menu.map(category => <MenuCategory key={category._id} {...category} />) : null}
            {props.currentUser ? <NewCategoryButton /> : null}
        </div>
    )
}

const mapStateToProps = state => ({
    currentUser: state.user.currentUser,
    menu: state.menu
})

export default connect(mapStateToProps)(MenuPage);

В приведенном выше коде я сортирую объекты из menu.data.js в порядке убывания по рангу. Данные из menu.data.js передаются компоненту MenuPage в качестве реквизита.

При сортировке данных меню объект Lunch будет находиться перед объектом Entree в массиве menuItems.

Однако я заметил, что когда я console.log () props.menu и массив menuItems, они оба одинаковы, несмотря на то, что я только отсортировал menuItems.

В результате при рендеринге данных элементы в категории «Обед» отображаются перед элементами в категории «Вход», даже если я отображаю props.menu, а не menuItems. Когда я удаляю код, который назначает props.menu для menuItems, а затем сортирует menuItems, элементы Entree отображаются перед элементами Lunch. Т.е.

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

    import MenuCategory from '../../components/menu-category/menu-category.component'
    import NewCategoryButton from '../../components/new-category-button/new-category-button.component';

    import './menu.styles.scss';

    const MenuPage = props => {    

        return (
            <div className='menu-page'>
                {props.menu ? props.menu.map(category => <MenuCategory key={category._id} {...category} />) : null}
                {props.currentUser ? <NewCategoryButton /> : null}
            </div>
        )
    }

    const mapStateToProps = state => ({
        currentUser: state.user.currentUser,
        menu: state.menu
    })

    export default connect(mapStateToProps)(MenuPage);

Я не уверен, почему это происходит. Любые идеи приветствуются.

Answer 1

Это происходит потому, что вы присвоили массив по ссылке, например:

const a = [1, 3, 2]
const b = a

Теперь, если вы сортируете b, то a также автоматически сортируется как:

const a = [1, 3, 2]
const b = a
b.sort()
console.log(a)
console.log(b)

Единственный способ разрешить это - создать клон массива a, а затем присвоить его b, например:

const a = [1, 3, 2]
const b = [...a] // clone array using spread syntax
b.sort()
console.log(a)
console.log(b)

Теперь вы видите, что только b отсортировано, а a остается прежним.