交换数组中的两个对象：ReactJS

Question

我问自己是否有一种干净、正确的方法可以使用setState. 这就是我目前所做的：

export function moveStepUp(index) {
    if(index > 0){
        let currentStep = this.state.stepsData[index];
        let stepAbove = this.state.stepsData[index - 1];

        this.setState((prevState) => ({
            stepsData: prevState.stepsData.map((step, i) => {
                if(i === index - 1)
                    return {
                        ...currentStep,
                        position: i
                    };
                if(i === index)
                    return {
                        ...stepAbove,
                        position: i
                    };

                return step;
            })
        }), () => console.log(this.state.stepsData));
    }
}

这段代码有效，但我认为可能有更好的解决方案。对于这样一个简单的任务来说，代码行数似乎太多了。谢谢！

Answer 1

如果您知道元素索引，为什么不使用第三个变量简单地交换两个数组值。首先将数组复制到另一个变量中，交换两个数组值，然后用于setState更新状态值。

像这样：

this.setState(prevState => {
    let data = [...prevState.data];

    let temp = data[index-1];
    data[index-1] = data[index];
    data[index] = temp;

    return { data };
})

您可以使用任何其他方式来创建数组的副本，而不是扩展运算符。