React Beautiful DnD：获取数据后无法将歌曲放入文件夹

Question

我正在开发一个React应用程序，使用react-beautiful-dnd来实现歌曲和文件夹的拖放功能。拖放功能与本地创建的文件夹完美配合，但在尝试将歌曲放入从后端获取的文件夹中时遇到问题。获取后，文件夹将变得不可删除，并且没有悬停效果。

这是我的设置的简化版本：

目录组件.tsx

import React, { useCallback, useEffect, useState } from 'react'
import { DragDropContext, DropResult } from 'react-beautiful-dnd'
import { useDispatch } from 'react-redux'
import { fetchCatalog, fetchFolders } from './catalogSlice'
import { unwrapResult } from '@reduxjs/toolkit'
import { toast } from 'react-toastify'
import CatalogFolder from './CatalogFolder'
import SongList from './SongList'
import { Folder, Song } from '../../../app/layout/models/catalog'
import { createStandardFolder, getFolderDroppableId } from '../../../app/layout/utils/folderUtils'

export default function CatalogComponent() {
  const dispatch = useDispatch()
  const [localCatalog, setLocalCatalog] = useState<{ songs: Song[] } | null>(null)
  const [localFolders, setLocalFolders] = useState<Folder[]>([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true)
      try {
        const [catalogResult, foldersResult] = await Promise.all([
          dispatch(fetchCatalog()),
          dispatch(fetchFolders()),
        ])

        const catalogData = unwrapResult(catalogResult)
        const foldersData = unwrapResult(foldersResult)

        const standardizedFolders = foldersData.map(createStandardFolder)
        setLocalCatalog(catalogData)
        setLocalFolders(standardizedFolders)
      } catch (error) {
        toast.error('Error fetching data')
      } finally {
        setIsLoading(false)
      }
    }

    fetchData()
  }, [dispatch])

  const handleDragEnd = useCallback((result: DropResult) => {
    if (!result.destination) return

    const { source, destination, draggableId } = result

    if (source.droppableId === 'song-list' && destination.droppableId.startsWith('folder-')) {
      const folderId = parseInt(destination.droppableId.split('-')[1], 10)
      const songId = parseInt(draggableId, 10)

      const song = localCatalog?.songs.find(s => s.songId === songId)
      if (!song) return

      setLocalFolders(prevFolders => {
        return prevFolders.map(folder => {
          if (folder.id === folderId) {
            return {
              ...folder,
              nodes: [...folder.nodes, { id: Date.now(), songId: song.songId, name: song.name, nodes: [] }]
            }
          }
          return folder
        })
      })
    }
  }, [localCatalog])

  if (isLoading) return <div>Loading...</div>

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <CatalogFolder folders={localFolders} />
      <SongList songs={localCatalog?.songs || []} />
    </DragDropContext>
  )
}

目录文件夹.tsx

import React from 'react'
import { Droppable } from 'react-beautiful-dnd'
import { Folder } from '../../../app/layout/models/catalog'

interface Props {
  folders: Folder[]
}

const CatalogFolder: React.FC<Props> = ({ folders }) => {
  return (
    <div>
      {folders.map(folder => (
        <Droppable key={folder.id} droppableId={`folder-${folder.id}`}>
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              {...provided.droppableProps}
              style={{
                background: snapshot.isDraggingOver ? 'lightblue' : 'lightgrey',
                padding: 4,
                width: 250,
                minHeight: 500,
              }}
            >
              <h4>{folder.name}</h4>
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      ))}
    </div>
  )
}

export default CatalogFolder

问题：

• 问题：从后端获取文件夹后，无法删除歌曲 进入他们。没有出现hover效果，说明 无法识别可放置区域。
• 预期行为：歌曲应该可以拖动到任何文件夹中，并且 当将歌曲拖到文件夹上时，该文件夹应突出显示。

我尝试过的：

• 确保为每个文件夹正确设置 droppableId。
• 验证 DragDropContext 和 Droppable 组件是 正确实施。
• 检查文件夹是否已正确获取并标准化。

问题： 是什么导致获取的文件夹变得不可删除，如何解决此问题？

Answer 1

检查了他们的常见问题部分吗？

我看到他们在

中添加了一个索引道具

希望这有帮助！