React拖放应用中状态同步问题：理解组件隔离与解决方案

// Panel.js
import { useState } from "react";

const Panel = ({ data }) => {
  const { title, label, items } = data;
  const [selectedCard, setSelectedCard] = useState(null); // 局部状态，在这里不再是关键

  const handleDragStart = (item) => {
    // 可以在这里做一些视觉反馈，但不再将item存入selectedCard供handleDrop使用
    console.log("Drag started for:", item.name);
  };

  // 直接接收被拖拽项的数据
  const handleDrop = (targetColName, droppedItem) => {
    console.log(`Dropped ${droppedItem.name} onto ${targetColName}`);
    // 在这里处理逻辑，例如更新父组件的状态
  };

  const handleDragOver = (e) => {
    e.preventDefault(); // 允许放置
  };

  return (
    <div className="w-56">
      <h2 className="mb-4">{title}</h2>
      <ul className="flex flex-col space-y-4">
        {items.map((item) => (
          <li key={item.id}>
            <button
              id={item.id}
              className="px-4 py-2 border w-full text-left cursor-grab"
              onDragStart={() => handleDragStart(item)}
              // 注意：这里需要知道拖拽的是哪个item，如果onDrop是在拖拽元素上，则可以用onDragEnd
              // 但如果onDrop是在目标元素上，则目标元素不知道源元素的数据
              // 因此，这种方法通常结合dataTransfer API或状态提升使用
              onDragOver={handleDragOver}
              draggable
            >
              {item.name}
            </button>
          </li>
        ))}
      </ul>
      {/* 假设Panel的父容器是拖放目标，或者Panel本身是拖放目标 */}
      <div
        className="min-h-[100px] border-dashed border-2 border-gray-400 p-2 mt-4"
        onDrop={(e) => {
          // 在实际的跨组件拖放中，这里需要通过dataTransfer获取数据
          const droppedItemData = e.dataTransfer.getData("text/plain");
          if (droppedItemData) {
            handleDrop(label, JSON.parse(droppedItemData));
          }
        }}
        onDragOver={handleDragOver}
      >
        拖放到此处 ({label})
      </div>
    </div>
  );
};

export default Panel;

// constants.js (或者直接定义在App.js中)
export const COLUMNS = [
  { label: 'todo', title: '待办事项', items: [{ id: 1, name: '任务一' }, { id: 2, name: '任务二' }] },
  { label: 'doing', title: '进行中', items: [{ id: 3, name: '任务三' }] },
  { label: 'done', title: '已完成', items: [] },
];

// App.js
import React, { useState } from 'react';
import Panel from './Panel'; // 假设Panel.js在同级目录
import { COLUMNS } from './constants'; // 导入列数据

function App() {
  const [columns, setColumns] = useState(COLUMNS);
  const [draggedCard, setDraggedCard] = useState(null); // 存储被拖拽的卡片
  const [fromLabel, setFromLabel] = useState(''); // 存储卡片来自的列

  // 处理拖拽开始事件：由子组件调用，将卡片和来源列信息传递给父组件
  const handleDragStart = (card, label) => {
    setDraggedCard(card);
    setFromLabel(label);
    // 可以在这里使用dataTransfer API存储数据，以便跨浏览器/组件拖放
    // e.dataTransfer.setData("text/plain", JSON.stringify(card));
  };

  // 处理放置事件：由子组件调用，将目标列信息传递给父组件
  const handleDrop = (targetLabel) => {
    if (!draggedCard || !fromLabel || fromLabel === targetLabel) {
      // 如果没有卡片被拖拽，或者拖回原列，则不执行任何操作
      setDraggedCard(null);
      setFromLabel('');
      return;
    }

    setColumns(prevColumns => {
      const newColumns = prevColumns.map(column => {
        if (column.label === fromLabel) {
          // 从源列中移除卡片
          return { ...column, items: column.items.filter(item => item.id !== draggedCard.id) };
        }