Обновление значений таблицы реакции после перетаскивания строки в React Redux

Question

Я выполнил функцию реактивного перетаскивания в свой проект, так что я могу изменить порядок строк в списке реактивной таблицы. Проблема в том, что у меня есть столбец с именем «Последовательность», который показывает мне порядок элементов, что я не могу обновить его значения.

Пример:

до (строки можно перетаскивать):

Sequence  | Name

    1       Jack
    2       Angel

после (мне нужно обновить значения последовательности, где я изменяюих позиция после удаления определенной перетаскиваемой строки, в этом случае я перетащил Джека на первую позицию и опустил его на вторую):

Sequence  | Name

   1        Angel
   2        Jack

React / Redux позволяет мне изменять порядок индексаэтого массива элементов, без получения сообщения об ошибке «Обнаружена мутация состояния между отправками», но это не позволяет мне обновить значения последовательности с новыми значениями порядка.

Это то, что я пробовал до сих пор:

    // within the parent class component 
    // item is an array of objects from child
    UpdateSequence(startIndex, endIndex, item) {

    // the state.Data is already an array of object
    const result = this.state.Data;
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);

    // this is working without the mutation state error
    this.setState({ Data: result })

    let positionDiff = 0;
    let direction = null;
    let newIndex = 0;

    positionDiff = endIndex - startIndex;
    if (startIndex > endIndex) {
        direction = "up";
    }
    else if (startIndex < endIndex) {
        direction = "down";
    }

    if (positionDiff !== 0) {
        for (var x = 0; x <= Math.abs(positionDiff); x++) {

            if (x === 0) {
                newIndex = startIndex + positionDiff - x;
                this.setState(prevState => ({
                    Data: {
                        ...prevState.Data,
                       [prevState.Data[newIndex].Sequence]: Data[newIndex].Sequence + positionDiff
                    },
                }));
            }
      else {
                if (direction === "down") {
                    newIndex = startIndex + positionDiff - x;
                    this.setState(prevState => ({
                        Data: {
                            ...prevState.Data,
                            [prevState.Data[newIndex].Sequence]: Data[newIndex].Sequence - 1
                        },
                    }));
                }
                else if (direction === "up") {
                    Data= startIndex + positionDiff + x;
                    this.setState(prevState => ({
                        Data: {
                            ...prevState.Data,
                            [prevState.Data[newIndex].Sequence]: Data[newIndex].Sequence + 1
                        },
                    }));
                }
            }
    }
        // so when i call save action i am stepping into the 'A state mutation was detected between dispatches' error message. 
        this.props.actions.saveSequence(this.state.Data)
        .then(() => {
            this.props.actions.loadData();
        })
        .catch(error => {
            toastr['error'](error, 'error....');
        })
}

Вызывая действие 'saveSequence' всякий раз, когда я пытаюсь обновить элемент массива 'Sequence', я получаю 'Между сообщениями об ошибках отправлений была обнаружена мутация состояния.

Любая помощь будет отличной! Спасибо!

примечание: логика, примененная для изменения порядка последовательности, в порядке.

Answer 1

Ну, я понял, изменив эту часть кода:

    //code....  

    const result = item;
    const [removed] = result.splice(startIndex, 1);

    // i created a new empty copy of the const 'removed', called 'copy' and update the Sequence property of the array like this below. (this code with the sequence number is just a sample of what i came up to fix it )

    let copy;
    copy = {
        ...removed,
        Sequence: 1000,
    };              

    result.splice(endIndex, 0, copy);

После того, как я не установил для него состояние, поэтому я прокомментировал эту строку:

    // this.setState({ Data: result })

    //...code

иконец этого - поместить результат в действие сохранения как параметр, а не в состояние.

     this.props.actions.saveSequence(result)

Работает, и теперь у меня есть полная функциональность перетаскивания, сохраняющая новую последовательность заказов в базе данных, не более "Обнаружена мутация состояния между отправками"!

Answer 2

Несмотря на то, что я не очень хорошо знаю избыточность, я замечаю, что вы непосредственно модифицируете state, что кажется вероятным виновником.

const result = this.state.Data;
const [removed] = result.splice(startIndex, 1);

splice - это деструктивный метод, который изменяетего вход, а его вход является ссылкой на что-то в this.state.

Для демонстрации:

> state = {Data: [1,2,3]}
{ Data: [ 1, 2, 3 ] }
> result = state.Data.splice(0,1)
[ 1 ]
> state
{ Data: [ 2, 3 ] }

Обратите внимание, что state был изменен. Это может быть тем, что обнаруживает Redux, и общим номером ответа.

Чтобы избежать изменения состояния, проще всего клонировать данные, которые вы хотите изменить

const result = this.state.Data.slice()

Обратите внимание, что это делает мелкую копию, поэтому, если Data имеет не примитивные значения, вам также следует остерегаться внесения деструктивных изменений в эти значения. (Если хотите узнать больше, посмотрите на глубокое или мелкое копирование.) Однако, поскольку вы только меняете порядок вещей, я считаю, что вы в безопасности.