react sortablejs--在具有嵌套数组的对象上设置“onChange”方法

Question

我正在使用反应-分类库。当试图在列表中移动卡片时。我知道错误：

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

我有一个密集的结构，它在这里迷路了。如何处理onChange，以便在控制台中看到列表中注释的顺序发生了变化。

演示这里

import Sortable from 'react-sortablejs';

// Functional Component
const SortableList = ({ items, onChange }) => {  
    return (
        <div>
          <Sortable
            tag="ul"
            onChange={(order, sortable, evt) => {
              console.log(order)
              onChange(order);
            }}

          >
            {items.listItems.map(val => {
             return <li key={uniqueId()} data-id={val}>List Item:  {val.title}</li>})
            }
          </Sortable>
        </div>
    );
};

class App extends React.Component {
    state = {
       item: {
        id: "abc123",
        name: "AAA",
        lists: [
          {
            id: "def456", 
            list_id: "654wer",
            title: 'List1',
            desc: "description",
            listItems: [
              {
                id: "ghj678", 
                title: "ListItems1",
                listItemsId: "88abf1"
              },
              {
                id: "poi098", 
                title: "ListItems2",
                listItemsId: "2a49f25"
              },
              {
                id: "1oiwewedf098", 
                title: "ListItems3",
                listItemsId: "1a49f25dsd8"
              }
            ]   
          },
          {
            id: "1ef456", 
            list_id: "654wer",
            title: 'List 2',
            desc: "description",
            listItems: [
              {
                id: "1hj678", 
                title: "ListItems4",
                listItemsId: "18abf1"
              },
              {
                id: "1oi098", 
                title: "ListItems5",
                listItemsId: "1a49f25"
              },
              {
                id: "1oiwewe098", 
                title: "ListItems6",
                listItemsId: "1a49f25dsd"
              }
            ]   
          },
          {
            id: "2ef456", 
            title: 'List 3',
            list_id: "254wer",
            desc: "description",
            listItems: [
              {
                id: "2hj678", 
                title: "ListItems7",
                listItemsId: "28abf1"
              },
              {
                id: "2oi098", 
                title: "ListItems8",
                listItemsId: "234a49f25"
              },
              {
                id: "df098", 
                title: "ListItems9",
                listItemsId: "1asd8"
              }
            ]   
          }
        ]
      }
    };

    render() {
      const c = this.state.item['lists'].map(item => { return item.listItems});

        return (
          this.state.item['lists'].map(item => {       
            return  (<div>
                      {item.title}
                      <SortableList
                        key={uniqueId()}
                        items={item}
                        onChange={(item) => {
                          console.log(item)
                          this.setState({item});
                        }}
                      >
                      </SortableList>
                    </div>)
          })
        )
    }
};

提前谢谢。

Answer 1

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

按照下面的步骤更新SortableList函数。

首先在li中传递li，然后在onChange方法中使用id接收order。基于此，我们对记录进行了分类。

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组件的App事件。

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

就这样!

这是你的工作演示

https://stackblitz.com/edit/react-sortablejs-blzxwd

Answer 2

当删除onChange列表中的Sortable事件时，它会工作。

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>
    );
};

​

​