Reactjs 使用Redux和React在阵列中移动对象

基本上，我试图在一个对象数组中移动一个对象，但当我移动同一个对象一两次时，它就会开始移动该数组中的另一个对象

因此，我尝试使用.slice（）然后.shift（item）按其索引创建一个新数组，然后使用.splice（newIndex，0，item）将其添加回正确的索引中，一旦更新了数组，我就会将其推送到Redux存储区，该存储区会更新我的Megadraft（即Draft.js）应用程序

我还尝试过直接操作原始数组，即this.props.array（就像你的Redux的意思一样），并使用对象内部的键而不是索引

import React from 'react';
import { MegadraftPlugin, DraftJS, CommonBlock } from "megadraft"

export default class ImageGalleryBlock extends React.Component {

_moveImgOneBack = (e, images, index) =>{
 e.preventDefault()

 let newPlace = index - 1
 if(newPlace == -1){
  newPlace = images.length
 }

 const image = images.shift(index)
 images.splice(newPlace, 0, image)

 return this.props.container.updateData({ images: images })
}

_moveImgOneForward = (e, images, index) =>{
 e.preventDefault()

 let newPlace = index +1
 if(newPlace > images.length){
  newPlace = 0
 }

 const image = images.shift(index)
 images.splice(newPlace, 0, image)

 return this.props.container.updateData({ images: images })
}

render(){
 return (
  <CommonBlock {...this.props} actions={this.actions} title="Image 
   Gallery">
    <BlockContent>
      <div className='gallery-cms-block'>
        { this.props.images.map((obj, index)=> {
  return(
    <div key={obj.key} className="image-box">
      <button title="Move image back one" className="move-button"  
       onClick={(e)=> this._moveImgOneBack(e, 
       this.props.data.images, index)}>◀ {index}</button>
      <img className="image" src={`${obj.image.uri}? 
       id=${obj.image.id}`} />
      <div>
        <button key={obj.key} title="Move image forward one"
         className="move-button" onClick={(e)=> 
         this._moveImgOneForward(e, this.props.data.images, 
         index)}>▶</button>
      </div>
    </div>
     )
    }) }
      </div>
    </BlockContent>
   </CommonBlockMKII>
  );
 }
}

从“React”导入React；
从“megadraft”导入{MegadraftPlugin，DraftJS，CommonBlock}
导出默认类ImageGalleryBlock扩展React.Component{
_moveImgOneBack=（e、图像、索引）=>{
e、 预防默认值（）
设newPlace=index-1
如果（newPlace==-1）{
newPlace=images.length
}
const image=images.shift（索引）
图像.拼接（新位置，0，图像）
返回此.props.container.updateData（{images:images}）
}
_moveImgOneForward=（e、图像、索引）=>{
e、 预防默认值（）
设newPlace=index+1
if（newPlace>images.length）{
newPlace=0
}
const image=images.shift（索引）
图像.拼接（新位置，0，图像）
返回此.props.container.updateData（{images:images}）
}
render（）{
返回(
{this.props.images.map（（obj，index）=>{
返回(
这是一个回溯（e，
this.props.data.images，index）}>◀ {index}
这个._moveImgOneForward（e，this.props.data.images，
索引）}>▶
)
}) }
);
}
}

我希望按钮（乙醚向前或向后）移动所述物品，并且仅移动所述物品

---

结果是它将移动项目一次。。。然后可能两次移动数组中的所有其他项。

。。。您的换档错误：

array = ['foo', 'bar', 'not', 'feeling', 'welcome', 'by jack', 'ass users']
array.shift(whatEverIndex) 

输出将始终是第一个索引，即“foo”，并且 因为您的索引是正确的，并且您正在使用

array.splice(newIndex, 0, item)

正确地说，你的阵列正在以一种奇怪的方式改变

尝试复制所需项目，然后使用.splice（）将其删除，如下所示：

const item = array[index] //copy item
array.splice(index, 1) //remove old item
array.splice(newIndex, 0, item) //place item

有趣的是，你们没有一个人花时间在stackoverflow上做你应该做的事情。。。你知道帮助别人该死的vete a cascarla，祝你好运Reece希望这能帮你解决问题。

谢谢@Whitepaw

我已使用以下内容更新了我的代码：

_moveOneImgBack = (newArray, index) =>{

  const arrayLength = newArray.length - 1
  const newBackPlace = index == 0 ? arrayLength : index - 1

  const image = newArray[index]
  newArray.splice(index, 1)
  // const image = images.shift(index)
  newArray.splice(newBackPlace, 0, image)

  this.props.container.updateData({ images: newArray })
}

现在它工作得很好，我被一个事实所困扰，那就是它可能与redux不可变有关。这是为了指出.shift（）的误用