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

一种解决方案是两次splice：

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"}

使用React不变性助手交换数组中的对象

1 个答案: