时间戳

首页 > 解决方案 > 使用订单号反应更改数组的选定项目索引

javascript - 使用订单号反应更改数组的选定项目索引

问题描述

嗨，我是 Reactjs 的新开发人员。我有个问题。这可能很简单，但我想学习根据用户订单号更改数组的选定项目索引的最佳实践或最佳方法。我的意思是用户将从 Input 中给出一个数字，我将使用该数字放置在数组中。

我的状态中的示例对象数组：

const [state, setState] = useState({
    dragFrames:
       [{id:1,name:"test-1",zIndex:1},
       {id:2,name:"test-2",zIndex:2},
       {id:3,name:"test-3",zIndex:3}]
    })

用户 zIndex在 id 为3的项目中输入“1”

我预期的新数组顺序如下：

dragFrames:
       [id:3,name:"test-3",zIndex:1},
       {id:1,name:"test-1",zIndex:2},
       {id:2,name:"test-2",zIndex:3}
       ]

我可以更改和设置任何对象的 zIndex 编号，但我不能根据输入值更改数组顺序。我怎样才能做到这一点？你可以帮帮我吗 ？

我以前试过这个，但我遇到了无限循环：

 if (e.target.value>0) {
                nowDev.z = e.target.value
                var arrayCopy = state.dragFrames.slice()
                state.dragFrames.map((item:any,index:any)=>{
                    if (index===e.target.value) {
                        arrayCopy.push(nowDev)
                    }else{
                        arrayCopy.push(item)
                    }
                })
                setState({ dragFrames: arrayCopy})
                
            }

标签： javascriptreactjs

解决方案

首先，您需要更改数组中所有元素的 zIndex。它的算法将如下：

  1. 映射数组并增加所有元素的 zIndex
  2. 对于用户设置的元素，将其 zIndex 设置为 1

完成上述操作后，按 zIndex 排序。

代码如下：

df = [{id:1,name:"test-1",zIndex:1},
       {id:2,name:"test-2",zIndex:2},
       {id:3,name:"test-3",zIndex:3}];
       
const updatedDF = df.map(x => {
    if(x.id === 3) return {...x, zIndex: 1}  // replace 3 with e.target.value
    else return {...x, zIndex: x.zIndex + 1}
});

updatedDF.sort((x, y) => x.zIndex - y.zIndex)

console.log(updatedDF)

推荐阅读