Javascript 常量中声明的组件上的道具不工作/无法识别（reactjs、reactdnd）

此代码用于我的仪表板。最初我把它们放在一个单独的div中（直接调用每个组件），道具工作正常，似乎没有问题。现在，我做了一个更新，其中每个组件都应该是可拖动的。在为Dragable特性添加了一段代码之后，我注意到每个组件的道具都不再工作了

出于所有目的，我还包括了一个直接包含组件的div（id为“nondraggable”），以表明道具确实可以工作，而在第二个div（id=“draggable”）中，道具似乎无法识别

import React, { useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import _ from "lodash";
import { v4 } from "uuid";   

function NewsFeed(props) {
 const RecentTran = {
    id: v4(),
    name: (
      <div>
        <RecentTransactions arrangeDashboard={props.arrangeDashboard} />
      </div>
    ),
  };

 const TranType = {
    id: v4(),
    name: (
      <TransactionType transactionTypeDisplay={props.transactionTypeDisplay} />
    ),
  };

  const [state, setState] = useState({
    todo: {
      items: [RecentTran],
    },
    "in-progress": {
      items: [TranType],
    },
  });

  const handleDragEnd = ({ destination, source }) => {
    if (!destination) {
      return;
    }

    if (
      destination.index === source.index &&
      destination.droppableId === source.droppableId
    ) {
      return;
    }

    const addItem = () => {
      setState((prev) => {
        return {
          ...prev,
          todo: {
            title: "Todo",
            items: [
              {
                id: v4(),
                name: text,
              },
              ...prev.todo.items,
            ],
          },
        };
      });

      setText("");
    };

    // Creating a copy of item before removing it from state
    const itemCopy = { ...state[source.droppableId].items[source.index] };

    setState((prev) => {
      prev = { ...prev };
      // Remove from previous items array
      prev[source.droppableId].items.splice(source.index, 1);

      // Adding to new items array location
      prev[destination.droppableId].items.splice(
        destination.index,
        0,
        itemCopy
      );

      return prev;
    });
  };

return(
<div>
 <div id="nondraggable" style={{ display: "flex" }}>
        <TranType />
        <RecentTran />
      </div>

<div  id="draggable"  style={{ display: "flex" }} className="App">
        <DragDropContext onDragEnd={handleDragEnd}>
          {_.map(state, (data, key) => {
            return (
              <div key={key} className={"column"}>
                <h3>{data.title}</h3>
                <Droppable droppableId={key}>
                  {(provided, snapshot) => {
                    return (
                      <div
                        ref={provided.innerRef}
                        {...provided.droppableProps}
                        className={"droppable-col"}
                      >
                        {data.items.map((el, index) => {
                          return (
                            <Draggable
                              key={el.id}
                              index={index}
                              draggableId={el.id}
                            >
                              {(provided, snapshot) => {
                                console.log(snapshot);
                                return (
                                  <div
                                    className={`item ${
                                      snapshot.isDragging && "dragging"
                                    }`}
                                    ref={provided.innerRef}
                                    {...provided.draggableProps}
                                    {...provided.dragHandleProps}
                                  >
                                    {el.name}
                                  </div>
                                );
                              }}
                            </Draggable>
                          );
                        })}
                        {provided.placeholder}
                      </div>
                    );
                  }}
                </Droppable>
              </div>
            );
          })}
        </DragDropContext>
      </div>

</div> 
)

}

import React，{useState}来自“React”；
从“dnd”导入{DragDropContext，dropable，Draggable}；
从“洛达斯”进口；
从“uuid”导入{v4}；
功能新闻源（道具）{
常数最近传输={
id:v4（），
姓名：(
),
};
常量传输类型={
id:v4（），
姓名：(
),
};
常量[状态，设置状态]=使用状态({
待办事项：{
项目：[最近交易]，
},
“进行中”：{
项目：[传输类型]，
},
});
const handleDragEnd=（{目的地，源}）=>{
如果（！目的地）{
返回；
}
如果(
destination.index==source.index&&
destination.droppableId==源.droppableId
) {
返回；
}
常量附加项=（）=>{
设置状态（（上一个）=>{
返回{
…上一页，
待办事项：{
标题：“待办事项”，
项目：[
{
id:v4（），
名称：文本，
},
…上一个待办事项，
],
},
};
});
setText（“”）；
};
//在将项目从状态中删除之前创建项目的副本
const itemCopy={…state[source.droppableId].items[source.index]}；
设置状态（（上一个）=>{
prev={…prev}；
//从以前的项目数组中删除
prev[source.droppableId].items.splice（source.index，1）；
//添加到新项目数组位置
prev[destination.droppableId].items.splice(
目的地索引，
0,
项目副本
);
返回上一个；
});
};
返回(
{{{.map（状态，（数据，键）=>{
返回(
{data.title}
{（已提供，快照）=>{
返回(
{data.items.map（（el，index）=>{
返回(
{（已提供，快照）=>{
控制台日志（快照）；
返回(
{el.name}
);
}}
);
})}
{提供的.占位符}
);
}}
);
})}
)
}