Arrays 使用react dnd beautiful如何将新项插入阵列中，或者它不起作用？

在我的项目中，我试图将我的信息更改为有效的拖放

但当我更改它时，拖放对插入到数组中的新项不起作用

如何使其在本例中仍然有效

代码沙盒：

import React，{useState}来自“React”；
从“react dom”导入react dom；
从“dnd”导入{DragDropContext，dropable，Draggable}；
//伪数据发生器
常量getItems=（计数，偏移量=0）=>
数组.from（{length:count}，（v，k）=>k）.map（（k）=>({
id:`item-${k+offset}-${new Date（）.getTime（）}`，
内容：`item${k+offset}`
}));
常量重新排序=（列表、开始索引、结束索引）=>{
const result=Array.from（列表）；
常数[移除]=结果拼接（起始索引，1）；
结果：拼接（末端索引，0，移除）；
返回结果；
};
/**
*将项目从一个列表移动到另一个列表。
*/
常量移动=（源、目标、droppableSource、droppableDestination）=>{
const sourceClone=Array.from（源）；
const destClone=Array.from（目标）；
const[removed]=sourceClone.splice（droppableSource.index，1）；
destClone.splice（droppableDestination.index，0，删除）；
const result={}；
结果[droppableSource.droppableId]=sourceClone；
结果[droppableDestination.droppableId]=destClone；
返回结果；
};
常数网格=8；
const getItemStyle=（isDragging，DragableStyle）=>({
//一些基本样式可以使物品看起来更漂亮一些
用户选择：“无”，
填充：网格*2，
边距：`0${grid}px 0`，
//如果拖动，请更改背景颜色
背景：IsDraging？“浅绿色”：“灰色”，
//我们需要在拖拽表上应用的样式
…拖拉风格
});
常量getListStyle=（IsDragingOver）=>({
背景：IsDragingOver？“浅蓝色”：“浅灰色”，
填充：网格，
宽度：250
});
函数QuoteApp（）{
const[state，setState]=useState（[getItems（10），getItems（5，10）]；
函数onDragEnd（结果）{
常量{source，destination}=result；
//被排除在名单之外
如果（！目的地）{
返回；
}
常量sInd=+source.droppableId；
const dInd=+destination.droppableId；
如果（sInd==dInd）{
const items=重新排序（状态[sInd]、source.index、destination.index）；
const newState=[…state]；
newState[sInd]=项目；
设置状态（newState）；
}否则{
常量结果=移动（状态[sInd]、状态[dInd]、源、目标）；
const newState=[…state]；
newState[sInd]=结果[sInd]；
newState[dInd]=结果[dInd]；
setState（newState.filter（（组）=>group.length））；
}
}
返回(
{
设置状态（[…状态，[]）；
}}
>
添加新组
{
设置状态（[…状态，getItems（1）]）；
}}
>
添加新项目
{state.map（（el，ind）=>(
{（已提供，快照）=>(
{el.map（（项目，索引）=>(
{（已提供，快照）=>(
ind:{ind}，索引{index}，{item.content}
{
const newState=[…state]；
新闻状态[ind]。剪接（索引，1）；
设定状态(
newState.filter（（组）=>group.length）
);
}}
>
删除
{
const newState=[…state]；
新闻状态[ind]。拼接(
指数
0,
getItems（1，索引）
);
设定状态(
newState.filter（（组）=>group.length）
);
}}
>
添加s/o
)}
))}
{提供的.占位符}
)}
))}
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

具体更改是“添加s/o”按钮

感谢您抽出时间

发行 当插入/添加“s/o”（抱歉，不确定是什么）时，您会拼接

getItems

的返回值，该返回值是一个数组，但您的主状态形状是一个对象数组

const getItems = (count, offset = 0) =>
  Array.from({ length: count }, (v, k) => k).map((k) => ({
    id: `item-${k + offset}-${new Date().getTime()}`,
    content: `item ${k + offset}`
  }));

...

<button
  type="button"
  onClick={() => {
    const newState = [...state];
    newState[ind].splice(
      index,
      0,
      getItems(1, index) // <-- inserts array!!
      );
    setState(
      newState.filter((group) => group.length)
    );
  }}
>
  add s/o
</button>

const getItems = (count, offset = 0) =>
  Array.from({ length: count }, (v, k) => k).map((k) => ({
    id: `item-${k + offset}-${new Date().getTime()}`,
    content: `item ${k + offset}`
  }));

...

<button
  type="button"
  onClick={() => {
    const newState = [...state];
    newState[ind].splice(
      index,
      0,
      getItems(1, index) // <-- inserts array!!
      );
    setState(
      newState.filter((group) => group.length)
    );
  }}
>
  add s/o
</button>

{newState: Array(2)}
  newState: Array(2)
    0: Array(11)
      0: Array(1) // <-- inserted array
        0: Object // <-- object you want inserted
          id: "item-0-1609711045911"
          content: "item 0"
      1: Object
        id: "item-0-1609711042837"
        content: "item 0"
      2: Object
      3: Object
      4: Object
      5: Object
      6: Object
      7: Object
      8: Object
      9: Object
      10: Object
    1: Array(5)

<button
  type="button"
  onClick={() => {
    const newState = [...state];
    newState[ind].splice(
      index,
      0,
      getItems(1, index).pop(), // <-- pop value from array
      );
    setState(
      newState.filter((group) => group.length)
    );
  }}
>
  add s/o
</button>