Javascript react sortablejs-设置'；onChange'；方法对具有嵌套数组的对象执行

我在用图书馆。 尝试在列表中移动卡片时。我得到一个错误：

无法读取未定义的属性“map”

我有一个密集的结构，它在这里消失了。如何处理

onChange

，以便在控制台中看到列表中注释的顺序已更改

演示

从'react sortablejs'导入排序表；
//功能部件
常量可排序列表=（{items，onChange}）=>{
返回(
{
console.log（订单）
变更（订单）；
}}
>
{items.listItems.map（val=>{
return
列表项：{val.title}
}）
}
);
};
类应用程序扩展了React.Component{
状态={
项目：{
id:“abc123”，
名称：“AAA”，
清单：[
{
id:“def456”，
列表id：“654wer”，
标题：“列表1”，
描述：“描述”，
清单项目：[
{
id:“ghj678”，
标题：“ListItems1”，
listItemsId:“88abf1”
},
{
id:“poi098”，
标题：“ListItems2”，
listItemsId:“2a49f25”
},
{
id:“1OIWEWDF098”，
标题：“ListItems3”，
listItemsId:“1a49f25dsd8”
}
]   
},
{
id:“1ef456”，
列表id：“654wer”，
标题：“列表2”，
描述：“描述”，
清单项目：[
{
id:“1hj678”，
标题：“ListItems4”，
listItemsId:“18abf1”
},
{
id:“1oi098”，
标题：“列表项5”，
listItemsId:“1a49f25”
},
{
id:“1OIWEW098”，
标题：“列表项6”，
listItemsId:“1a49f25dsd”
}
]   
},
{
id:“2ef456”，
标题:"名单3",，
列表id:“254wer”，
描述：“描述”，
清单项目：[
{
id:“2hj678”，
标题：“ListItems7”，
listItemsId:“28abf1”
},
{
id:“2oi098”，
标题：“列表项8”，
listItemsId:“234a49f25”
},
{
id:“df098”，
标题：“ListItems9”，
listItemsId:“1asd8”
}
]   
}
]
}
};
render（）{
const c=this.state.item['lists'].map（item=>{return item.listItems}）；
返回(
this.state.item['lists'].map（item=>{
返回(
{item.title}
{
console.log（项目）
this.setState（{item}）；
}}
>
)
})
)
}
};

---

提前感谢。

在可排序的

列表中删除
onChange
事件时，它会起作用

const SortableList = ({ items, onChange }) => {  
    return (
        <div>
          <Sortable
            tag="ul"
          >
            {items.listItems.map(val => {
             return <li key={uniqueId()} data-id={val}>List Item:  {val.title}</li>})
            }
          </Sortable>
        </div>
    );
};

const SortableList=（{items，onChange}）=>{
返回(
{items.listItems.map（val=>{
return
列表项：{val.title}
}）
}
);
};

您必须更新代码中的一些更改

更新
可排序列表
功能，如下所示

在
li
中首先通过
data id={val.id}
，然后在
onChange
方法中，您将收到带有
id
的
订单。基于此，我们正在对记录进行排序

const SortableList = ({ items, onChange }) => {  
    return (
        <div>
          <Sortable
            tag="ul"
            onChange={(order, sortable, evt) => {
              items.listItems.sort(function(a, b){
                  return order.indexOf(a.id) - order.indexOf(b.id);
              });
              onChange(items);
            }}
          >
            {items.listItems.map(val => {
             return <li key={uniqueId()} data-id={val.id}>List Item:  {val.title}</li>})
            }
          </Sortable>
        </div>
    );
};

就这样

这是为您准备的工作演示

为什么第一个
onChange
在调用自己？@NicolòCozzani我从
this.state.item['lists'].map中传递
item
项是对象，但我必须传递数组你必须在第一个
控制台.log（）之后删除
onChange（order）；
你也不需要指定
onChange（）
上的
渲染
function@NicolòCozzani当我在变更（订单）时删除
，卡的顺序没有改变，在哪里放置console.log以查看顺序是否改变？您能否解释如何改变和更新两个组。您的示例在两个单独的可排序和排序中工作…但是如果我想更新组状态。
const SortableList = ({ items, onChange }) => {  
    return (
        <div>
          <Sortable
            tag="ul"
            onChange={(order, sortable, evt) => {
              items.listItems.sort(function(a, b){
                  return order.indexOf(a.id) - order.indexOf(b.id);
              });
              onChange(items);
            }}
          >
            {items.listItems.map(val => {
             return <li key={uniqueId()} data-id={val.id}>List Item:  {val.title}</li>})
            }
          </Sortable>
        </div>
    );
};

onChange={(item) => {
  let itemObj = {...this.state.item};
  itemObj.lists.map(x=>{
    if(x.id === item.id) x = item;
  });
  this.setState({itemObj});
}}