Багги движение объекта в массиве с Redux и React - PullRequest
Новая
       30

Багги движение объекта в массиве с Redux и React

0 голосов
/ 18 января 2019

Обычно я пытаюсь переместить один объект в массиве объекта, но когда я перемещаю один и тот же объект один или два раза, он начинает перемещать другой объект в указанном массиве.

Итак, я попытался создать новый массив с .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>
  );
 }
}

Я ожидаю, что кнопка (эфир вперед или назад) переместит указанный элемент и только указанный элемент.

Результатом является то, что он будет перемещать элемент один раз ... может быть, дважды, а затем сосет, перемещая все остальные элементы в массиве.

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Спасибо @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 })
}

и теперь он работает отлично, я застрял в том факте, что это может иметь какое-то отношение к редукционным неизменяемым. Так что это указывает на неправильное использование .shift ()

0 голосов
/ 18 января 2019

... вы используете 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

Забавно, что никто из вас, ребята NaN , laruiss , Antoine Grandchamp , J-Alex нашел время, чтобы действительно сделать то, что вы должны делать в стеке переполнения ... вы знаетепомочь кому-нибудь. черт побери ветвь каскара , удачи тебе, Рис, надеюсь, это решило это для тебя.

...