使用 Redux 和 React 在数组中移动对象的错误移动

Question

基本上我试图在对象数组中移动单个对象，但是当我移动同一个对象一次或两次时，它开始移动所述数组中的另一个对象。

所以我尝试使用 .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>
  );
 }
}

我希望按钮（ether 向前或向后）移动所述项目并且仅移动所述项目。

结果是它会移动项目一次...也许两次然后移动数组中的所有其他项目就很糟糕了。

Answer 1

...您使用的 shift 错误：

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

有趣的是你们 none NaN, laruiss, Antoine Grandchamp, J-Alex 花时间在 Whosebug 上实际做你应该做的事情......你知道帮助别人。 该死的 vete a cascarla，祝你好运 Reece 希望这能为你解决。

Answer 2

感谢@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()

的误用

使用 Redux 和 React 在数组中移动对象的错误移动

Buggy movement of Object in Array with Redux and React

reactjs

ruby-on-rails-5

redux

draftjs