javascript - 无法在 react-sortable-hoc 的一列中移动卡片

Question

我使用图书馆：https ://github.com/clauderic/react-sortable-hoc 。我有三列。每人三张牌。问题是我不能在一列内移动卡片。尝试移动卡时出现错误：

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

此处演示：https ://stackblitz.com/edit/react-jpszoq?file=index.js

import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';


const SortableItem = SortableElement(({value}) => {
  return(
    <ul>
      {value.listItems.map((it, index) => {
        return <li key={it.id}>{it.title}</li>
      })}
    </ul>
  )    
})

const SortableList = SortableContainer(({items}) => {
  console.log(items)
  return (
    items.map((item, index) => 
      <div key={item.id}>{item.title}
        <SortableItem key={`item-${item.id}`} index={index} value={item} />
      </div>
    )      
  );
});

class App extends Component {
  constructor() {
    super();
    this.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"
              }
            ]   
          }
        ]
      }
    };
  }

  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({lists}) => ({
      lists: arrayMove(lists, oldIndex, newIndex),
    }));
  };

   render() {
     return <SortableList items={this.state.item['lists']} onSortEnd={this.onSortEnd} />;
  }
}

标签： javascriptreactjsreact-sortable-hoc