如何在可拖动列表中重新排序数组序列

Question

我正在使用 react-beautiful-dnd 组件创建可拖动列表。我得到按 sequence 字段排序的后端数据。拖放项目后，我使用 reorder 函数创建一个新列表。这就是我遇到问题的地方！我需要根据 newItems 通过重新排序 'sequence' 字段来创建一个新数组将新字符串保存在后端。我该怎么做？

初步结果

[
  { "id": 81,  "sequence": 14, "name": "Alaska" },
  { "id": 93,  "sequence": 26, "name": "Colorado" },
  { "id": 110, "sequence": 31, "name": "Kansas" },
  { "id": 121, "sequence": 43, "name": "Minnesota" },
  { "id": 132, "sequence": 52, "name": "New York" },
  { "id": 143, "sequence": 67, "name": "Virginia" },
  { "id": 164, "sequence": 78, "name": "Georgia" },
  { "id": 150, "sequence": 85, "name": "Florida" }
]

当前结果

[      
  { "id": 93,  "sequence": 26, "name": "Colorado" },
  { "id": 110, "sequence": 31, "name": "Kansas" },
  { "id": 121, "sequence": 43, "name": "Minnesota" },
  { "id": 132, "sequence": 52, "name": "New York" },
  { "id": 143, "sequence": 67, "name": "Virginia" },
  { "id": 164, "sequence": 78, "name": "Georgia" },
  { "id": 81,  "sequence": 14, "name": "Alaska" },
  { "id": 150, "sequence": 85, "name": "Florida" }
]

预期结果

[      
  { "id": 93,  "sequence": 14, "name": "Colorado" },
  { "id": 110, "sequence": 26, "name": "Kansas" },
  { "id": 121, "sequence": 31, "name": "Minnesota" },
  { "id": 132, "sequence": 43, "name": "New York" },
  { "id": 143, "sequence": 52, "name": "Virginia" },
  { "id": 164, "sequence": 67, "name": "Georgia" },
  { "id": 81,  "sequence": 78, "name": "Alaska" },
  { "id": 150, "sequence": 85, "name": "Florida" }
]

重新排序功能

const onDragEnd = ({ destination, source }) => {
    // dropped outside the list
    if (!destination) return;

    const newItems = reorder(items, source.index, destination.index);

    console.log(newItems);
    // Create a new array here!

    setItems(newItems);
  };

拖放组件

<DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="droppable-list">
              {(provided) => (
                <div ref={provided.innerRef} {...provided.droppableProps}>
                  {items.map((item, index) => (
                    <Draggable
                      draggableId={`${item.id}`}
                      index={index}
                      key={item.id}
                    >
                      {(provided, snapshot) => (
                        <ListItem
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          className={
                            snapshot.isDragging ? classes.draggingListItem : ""
                          }
                        >
                          <ListItemAvatar>
                            <Avatar>
                              <Add />
                            </Avatar>
                          </ListItemAvatar>
                          <ListItemText
                            primary={item.name}
                            secondary={`Sequence: ${item.sequence}`}
                          />
                        </ListItem>
                      )}
                    </Draggable>
                  ))}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          </DragDropContext>

Answer 1

尝试将 .sort 与您的 sequence 属性一起使用。像这样：

const sortAscendingListByField = (list, field) => list.sort((a, b) => a[field] - b[field]);

const sorted = sortAscendingListByKey(yourList, 'sequence');

Answer 2

已解决，我按照@pilchard 的指示实施。谢谢！

const [sequence, setSequence] = useState(data.map((d) => d.sequence));

const onDragEnd = ({ destination, source }) => {
    // dropped outside the list
    if (!destination) return;

    const newItems = reorder(items, source.index, destination.index);

    const newItemSequence = newItems.map(
      (el, index) => (el[index] = { ...el, sequence: sequence[index] })
    );

    setItems(newItemSequence);
  };

See in CodeSandbox

如何在可拖动列表中重新排序数组序列

How to reorder array sequence in draggable list

javascript

reactjs

material-ui