ReactJS - я не понимаю синтаксис, используемый в этой функции

Question

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

moveCard = (dragIndex, hoverIndex) => {
    const { cards } = this.state
    const dragCard = cards[dragIndex]

    this.setState(
      update(this.state, {
        cards: {
          $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]],
        },
      }),
    )
}

В частности, я не понимаю строку

$splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]],

Я попытался найти определение массива сплайсинга, но я просто не понимаю, как это работает.Может кто-нибудь объяснить?

Answer 1

Это помощник неизменности . Для каждого элемента в массивах он вызывает splice() для цели с параметрами, предоставленными элементом.

Например:

const collection = [1, 2, {a: [12, 17, 15]}];
const newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});
// Outputs: [1, 2, {a: [12, 13, 14, 15]}]

Получает доступ к индексу collection 2, ключу a и выполняет объединение одного элемента, начиная с индекса 1 (удалить 17), при вставке 13 и 14.

Answer 2

Это инициализатор свойства, определяющий свойство с именем $splice со значением [[dragIndex, 1], [hoverIndex, 0, dragCard]].

[[dragIndex, 1], [hoverIndex, 0, dragCard]] - массив, содержащий:

• Массив с dragIndex и 1 в нем
• Другой массив с hoverIndex, 0 и dragCard в нем

Свойство $splice является помощником неизменяемости :

{$splice: array of arrays} для каждого элемента в массивах вызовите splice() для цели с параметрами, предоставленными элементом.

По сути, этот код делает это:

const cards = [...this.state.cards];
cards.splice(dragIndex, 1);
cards.splice(hoverIndex, 0, dragCard);
this.setState({cards});

... что означает, что неверно . Когда вы устанавливаете состояние на основе существующего состояния, вы должны использовать версию обратного вызова setState. Нам нужно больше контекста, чтобы показать вам, как правильно реализовать это с версией обратного вызова setState (поскольку вы не можете полагаться на то, что hoverIndex и dragIndex все еще верны, когда происходит обратный вызов). Но это будет выглядеть примерно так:

// This is GUESSING at several details, such as that the entries in
// `cards` are objects.
const { cards } = this.state;
const cardToRemove = cards[dragIndex];
const addInFrontOf = cards[hoverIndex];
this.setState(prevState => {
    const cards = [...prevState.cards];
    let index = cards.findIndex(cardToRemove);
    if (index != -1) {
        cards.splice(index, 1);
    }
    let index = addInFrontOf ? cards.findIndex(addInFrontOf) : cards.length;
    cards.splice(index, 0, dragCard);
    return {cards};
});

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

Обратите внимание, что эти три строки:

const { cards } = this.state;
const cardToRemove = cards[dragIndex];
const addInFrontOf = cards[hoverIndex];

... может быть

const {
    cards: {
      [dragIndex]: cardToRemove,
      [hoverIndex]: addInFrontOf
    }
} = this.state;

... но я думаю, что ясность там страдает довольно сильно. : -)