使用 Redux 和 React 对数组中的对象进行错误移动答案

【问题标题】：Buggy movement of Object in Array with Redux and React使用 Redux 和 React 对数组中的对象进行错误移动
【发布时间】：2019-01-18 09:48:59
【问题描述】：

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

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

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

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

【问题讨论】：

标签： reactjs redux ruby-on-rails-5 draftjs

【解决方案1】：

...您的使用移位错误：

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

有趣的是，你们NaN、laruiss、Antoine Grandchamp、J-Alex 都没有花时间在 stackoverflow 上实际做你应该做的事情......你知道帮助别人。 该死 vete a cascarla，祝 Reece 好运，希望这可以为您解决问题。

【讨论】：

【解决方案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() 的误用

【讨论】：