Javascript 如何在React中重新排列数组？

我在列表中显示了一个字符串数组。每个字符串都应该能够在数组中上下移动。例如：

const数组=[“你好”，“世界”，“酷”]
moveUp（“世界”，1）/（moveUp:value:string，index:number）
//预期输出=>[“world”、“hello”、“cool”]

您只需给出要上移或下移的索引，如下所示：

let moveUp=(i) => {
    if(i<words.length-1) {
        setWords([...words.slice(0,i), words[i+1], words[i], ...words.slice(i+2)])
  } else {
return;}
}

let moveDown=(i) => {
    if(i>0) {
       setWords([...words.slice(0,i-1), words[i], words[i-1], ...words.slice(i+1)])
  } else {
return;}
}

让moveUp=（i）=>{
如果（i）{
如果（i>0）{
setWords（[…words.slice（0，i-1），words[i]，words[i-1]，…words.slice（i+1）]）
}否则{
返回；}
}

在您的

move

函数中，它不应该返回拼接结果，因为splice（）函数返回的是已删除的项目，而不是更新的数组。此外，您需要将更新的单词数组分解为一个新数组，以便正确更新状态

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[words，setWords]=useState（[“你好”，“世界”，“酷”]）
常数HandleOrdsactions=(
行动，
一行
) => {
常量移动=（从，到）=>{
常量项=字拼接（从，1）[0]；
字.拼接（至，0，项目）；
返回[…单词]；
}
开关（动作）{
案例“向上移动”：
行>0&&setWords（移动（行，行-1））；
打破
案例“向下移动”：
行<2&&setWords（移动（行，行+1））；
打破
违约：
返回；
}
};
返回(
{
words.map（（word，i）=>(
{word}
HandleOrdsActions（“moveUp”，i）}>up
HandleOrdsActions（“向下移动”，i）}>向下移动
))
}
);
}

我认为您需要这样的功能（我重点介绍了在数组中移动单词的功能；您必须将其实现到React组件中）：

const words=['hello'，'world'，'from'，'me']；
常量方向={
向上：‘向上’，
向下：“向下”
}
功能移动字（字、方向、金额）{
const currentIndex=words.findIndex（item=>item==word）；
如果（当前索引==-1）{
log（'该单词在数组中不存在'）；
返回；
}
让插入索引；
如果（方向===方向向上）{
insertIndex=当前索引-金额；
而（插入索引<0）{
insertIndex=words.length-insertIndex；
}
}
如果（方向===方向向下）{
insertIndex=当前索引+金额；
while（insertIndex>=words.length）{
insertIndex=insertIndex-words.length；
}
}
const otherWords=[…words.slice（0，currentIndex），…words.slice（currentIndex+1）]
如果（插入索引===0）{
返回[单词，…其他单词]；
}else if（insertIndex==words.length-1）{
返回[…其他单词，单词]；
}否则{
返回[
…其他词。切片（0，insertIndex），
单词
…其他词.切片（插入索引）
];
}
}
console.log（'原始顺序：'，文字）；
console.log（moveWord（'from'，directions.UP，2））；
console.log（moveWord（'from'，directions.DOWN，1））；
console.log（moveWord（'from'，directions.DOWN，3））；
log（moveWord（'hello'，directions.UP，7））；
console.log（moveWord（'foo'，directions.DOWN，3））；

我不认为您给了行一个值。是的，这是一个拼写错误，行是索引。我已经更正了帖子。