React拖放应用中状态管理：解决跨组件状态访问为Null的问题

const Panel = ({ data }) => {
  const { title, label, items } = data;
  const [selectedCard, setSelectedCard] = useState(null); // selectedCard是Panel的局部状态

  const handleDragStart = (item) => {
    setSelectedCard(item); // 更新Panel的selectedCard
  };
  const handleDrop = (colName, id) => {
    console.log(selectedCard); // 尝试访问Panel的selectedCard
  };
  // ...
};

import React, { useState } from 'react';
import Panel from './Panel'; // 假设Panel组件在同一目录

// 示例数据
const COLUMNS = [
  { label: 'todo', title: '待办事项', items: [{ id: 1, name: '任务A' }, { id: 2, name: '任务B' }] },
  { label: 'doing', title: '进行中', items: [{ id: 3, name: '任务C' }] },
  { label: 'done', title: '已完成', items: [{ id: 4, name: '任务D' }] },
];

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

  // 处理拖动开始事件
  const handleDragStart = (card, label) => {
    setDraggedCard(card);
    setFromLabel(label);
  };

  // 处理拖放事件（在目标列上触发）
  const handleDrop = (targetLabel) => {
    if (!draggedCard || fromLabel === targetLabel) {
      // 没有拖动的卡片或拖放到同一列，不做处理
      return;
    }

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

      // 2. 将卡片添加到目标列
      return updatedColumns.map(column => {
        if (column.label === targetLabel) {
          // 检查是否已存在，避免重复添加
          if (!column.items.some(item => item.id === draggedCard.id)) {
            return {
              ...column,
              items: [...column.items, draggedCard]
            };
          }
        }
        return column;
      });
    });

    // 重置拖动状态
    setDraggedCard(null);
    setFromLabel('');
  };

  // 处理拖动经过事件（阻止默认行为以允许onDrop）
  const handleDragOver = (e) => {
    e.preventDefault();
  };

  return (
    <div className="flex space-x-4 p-8">
      {columns.map((column) => (
        <Panel
          key={column.label}
          data={column}
          handleDragStart={handleDragStart} // 传递给Panel
          handleDrop={handleDrop}           // 传递给Panel
          handleDragOver={handleDragOver}   // 传递给Panel
        />
      ))}
    </div>
  );
}

export default App;

import React from "react";

const Panel = ({ data, handleDragStart, handleDrop, handleDragOver }) => {
  const { title, label, items } = data;

  return (
    <div
      className="w-56 p-4 border rounded-lg bg-gray-50 shadow-md"
      onDrop={() => handleDrop(label)} // 将onDrop绑定在整个Panel上作为拖放目标
      onDragOver={handleDragOver}      // 允许在此区域内放置
    >
      <h2 className="text-lg font-semibold mb-4 text-gray-800">{title}</h2>
      <ul className="flex flex-col space-y-3 min-h-[100px]"> {/* 确保有足够的拖放区域 */}
        {items.map((item) => (
          <li key={item.id}>
            <button
              id={item.id}
              className="px-4 py-2 border w-full text-left cursor-grab bg-white rounded-md hover:bg-gray-100 transition-colors duration-200"
              onDragStart={() => handleDragStart(item, label)} // 传递卡片和来源label给父组件
              draggable
            >
              {item.name}
            </button>
          </li>
        ))}
        {/* 如果列为空，提供一个可见的拖放区域 */}
        {items.length === 0 && (
          <div className="h-20 flex items-center justify-center text-gray-400 border-dashed border-2 rounded-md">
            拖放至此
          </div>
        )}
      </ul>
    </div>
  );
};

export default Panel;

// App.js 中的 handleDrop 逻辑
const handleDrop = (targetLabel) => {
    if (!draggedCard || fromLabel === targetLabel) {
      return; // 没有拖动的卡片或拖放到同一列，不做处理
    }

    setColumns(prevColumns => {
      // 创建新的columns数组，避免直接修改原状态
      const newColumns = prevColumns.map(column => ({ ...column, items: [...column.items] }));

      // 找到源列和目标列
      const sourceColumn = newColumns.find(col => col.label === fromLabel);
      const destinationColumn = newColumns.find(col => col.label === targetLabel);

      if (sourceColumn && destinationColumn) {
        // 从源列移除卡片
        sourceColumn.items = sourceColumn.items.filter(item => item.id !== draggedCard.id);

        // 添加卡片到目标列（确保不重复添加）
        if (!destinationColumn.items.some(item => item.id === draggedCard.id)) {
          destinationColumn.items.push(draggedCard);
        }
      }
      return newColumns;
    });

    // 重置拖动状态，为下一次拖放做准备
    setDraggedCard(null);
    setFromLabel('');
  };