Как переместить javascript целый объект в массиве при использовании функции splice? (Реагировать. js)

Question

Я работаю с взаимодействием перетаскивания в React. js. Я переупорядочиваю массив «строк» ​​с помощью функции сращивания, которая вызывается по завершении перетаскивания с помощью функции onDragEnd ниже:

onDragEnd = (result) => {
    const { destination, source, draggableId, type } = result;
    if (!destination) {
        return;
    }
    if (
        destination.draggableId === source.droppableId &&
        destination.index === source.index
    ) {
        return;
    }

    if (type === "row") {
        const newRowOrder = Array.from(**this.state.currentRows**);
        newRowOrder.splice(source.index, 1);
        newRowOrder.splice(destination.index, 0, **draggableId**);

        const newState = {
            ...this.state,
            currentRows: newRowOrder,
        };

        this.setState(newState);
    }
};

Перед вызовом функции onDragEnd состояние currentRow выглядит следующим образом: currentRow состояние перед onDragEnd

Когда функция вызывается, функция splice работает (я думаю), но она не перемещает весь объект в массиве, только идентификатор. DraggableId, используемый в функции splice, является идентификатором объекта, который необходимо переместить.

После вызова функции onDragEnd состояние currentRow выглядит следующим образом: состояние currentRow после onDragEnd

Можно ли переместить весь объект в новый индекс?

Answer 1

Я думаю, вы просто вставляете draggableId newRowOrder.splice(destination.index, 0, **draggableId**);, вы можете найти весь объект с помощью функции Array.find и вставить весь объект

onDragEnd = (result) => {
    const { destination, source, draggableId, type } = result;
    if (!destination) {
        return;
    }
    if (
        destination.draggableId === source.droppableId &&
        destination.index === source.index
    ) {
        return;
    }

    if (type === "row") {
        const draggableRow = this.state.currentRows.find(row => row.id === draggableId);
        const newRowOrder = Array.from(this.state.currentRows);
        newRowOrder.splice(source.index, 1);
        newRowOrder.splice(destination.index, 0, draggableRow);

        const newState = {
            ...this.state,
            currentRows: newRowOrder,
        };

        this.setState(newState);
    }
}