保留先前状态的React钩子状态(REACT DND)

import React, { useState, useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd';

const ItemTypes = {
  BOX: 'box',
};

const Box = ({ id, text, index, moveBox }) => {
  const [state, setState] = useState({
    isDragging: false,
    originalIndex: index,
  });
  const ref = useRef(null);

  const [, drop] = useDrop({
    accept: ItemTypes.BOX,
    hover(item, monitor) {
      if (!ref.current) {
        return;
      }
      const dragIndex = item.index;
      const hoverIndex = index;

      if (dragIndex === hoverIndex) {
        return;
      }

      moveBox(dragIndex, hoverIndex);

      item.index = hoverIndex;
    },
  });

  const [{ isDragging }, drag] = useDrag({
    item: { type: ItemTypes.BOX, id, index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
    end: (item, monitor) => {
      const { originalIndex } = state;
      const dropResult = monitor.getDropResult();

      if (dropResult && dropResult.index !== originalIndex) {
        moveBox(originalIndex, dropResult.index);
      }

      setState({ ...state, isDragging: false });
    },
  });

  const opacity = isDragging ? 0.4 : 1;

  drag(drop(ref));

  return (
    <div ref={ref} style={{ opacity }}>
      {text}
    </div>
  );
};

const Container = () => {
  const [boxes, setBoxes] = useState([
    { id: 1, text: 'Box 1' },
    { id: 2, text: 'Box 2' },
    { id: 3, text: 'Box 3' },
  ]);

  const moveBox = (dragIndex, hoverIndex) => {
    const draggedBox = boxes[dragIndex];

    setBoxes(
      update(boxes, {
        $splice: [
          [dragIndex, 1],
          [hoverIndex, 0, draggedBox],
        ],
      })
    );
  };

  return (
    <div>
      {boxes.map((box, index) => (
        <Box
          key={box.id}
          id={box.id}
          text={box.text}
          index={index}
          moveBox={moveBox}
        />
      ))}
    </div>
  );
};

export default Container;