Поменяйте местами объекты в массиве с помощью помощника реагирования на неизменность

Question

Мне нужно иметь возможность переключать элементы в массиве в состояние, используя помощник неизменяемости, чтобы не изменять состояние напрямую.

Это поведение, которого я хочу достичь (т.е. переключение позиций 2 с 3)

[
    { key: 'banana'},
    { key: 'apple'},
    { key: 'orange'}
]

, чтобы стать

[
    { key: 'banana'},
    { key: 'orange'},
    { key: 'apple'}
]

Приведенный ниже код генерирует то, что ямысль собиралась выполнить это

immutableFruit = {}

let tempFruit = fruits[2]
immutableFruit[2] = { $set: fruits[1] }
immutableFruit[1] = { $set: tempFruit }

this.setState({fruits: immutableFruit})

При входе в консоль я получаю то, что ожидаю

1:
  $set: { key: 'orange' }
2:
  $set: { key: 'apple' }

Так что, на мой взгляд, состояние должно отражать это изменение, но ононе то, чего я не ожидал, он переключает один из элементов, но не может заменить другой.

Вот так выглядит результирующий массив состояний

[
    { key: 'banana'},
    { key: 'orange'},
    { key: 'orange'}
]

Итак, вкратце, я получаю два идентичных элемента в списке.

Не является ли $set неправильным способом сделать это?Просматривая документацию помощника по неизменяемости, я не нашел примеров такого поведения или команд, которые, возможно, лучше подходят для обмена элементами в массиве

Answer 1

Одним из решений является сращивание дважды:

const fruits = [
    { key: "banana" },
    { key: "apple" },
    { key: "orange" }
];

console.log(fruits);

const swappedAppleAndOrange = 
    update(
        update(
            fruits, { $splice: [[1, 1, fruits[2]]] }
        ),
        { $splice: [[2, 1, fruits[1]]]}
    );

console.log(swappedAppleAndOrange);

Эти журналы:

0: {key: "banana"}
1: {key: "apple"}
2: {key: "orange"}

0: {key: "banana"}
1: {key: "orange"}
2: {key: "apple"}