创建拖放卡片时无法读取未定义的 属性 'map'
Cannot read property 'map' of undefined when creating drag and drop cards
我使用的图书馆:https://github.com/clauderic/react-sortable-hoc
我正在尝试实现这种效果:https://imgur.com/AIpA720
此处演示:https://stackblitz.com/edit/react-r7hzxk
我将 this.state.item ['lists']
移动到组件 SortableList
。在组件 SortableList
中想要迭代 items.listItems.map
但我有错误:
Cannot read property 'map' of undefined
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';
const SortableItem = SortableElement(({value}) => <li>{value}</li>);
const SortableList = SortableContainer(({items}) => {
return (
<ul>
{items.listItems.map((value, index) => (
<SortableItem key={`item-${value.id}`} index={index} value={value.id} />
))}
</ul>
);
});
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: "1ef456",
list_id: "654wer",
title: 'List 2',
desc: "description",
listItems: [
{
id: "1hj678",
title: "ListItems3",
listItemsId: "18abf1"
},
{
id: "1oi098",
title: "ListItems4",
listItemsId: "1a49f25"
}
]
},
{
id: "2ef456",
title: 'List 3',
list_id: "254wer",
desc: "description",
listItems: [
{
id: "2hj678",
title: "ListItems5",
listItemsId: "28abf1"
},
{
id: "2oi098",
title: "ListItems6",
listItemsId: "234a49f25"
}
]
}
]
}
};
}
onSortEnd = ({oldIndex, newIndex}) => {
this.setState(({lists}) => ({
lists: arrayMove(lists, oldIndex, newIndex),
}));
};
render() {
return <SortableList items={this.state.item['lists']} onSortEnd={this.onSortEnd} />;
}
}
您需要先遍历项目数组并且不要忘记 return 结果:
items.map(item =>
item.listItems.map((value, index) =>
<SortableItem key={`item-${value.id}`} index={index} value={value.id} />
)
)
你应该改变
items to item
{item.listItems.map((value, index) => (
<SortableItem key={`item-${value.id}`} index={index} value={value.id} />
))}
我使用的图书馆:https://github.com/clauderic/react-sortable-hoc
我正在尝试实现这种效果:https://imgur.com/AIpA720
此处演示:https://stackblitz.com/edit/react-r7hzxk
我将 this.state.item ['lists']
移动到组件 SortableList
。在组件 SortableList
中想要迭代 items.listItems.map
但我有错误:
Cannot read property 'map' of undefined
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';
const SortableItem = SortableElement(({value}) => <li>{value}</li>);
const SortableList = SortableContainer(({items}) => {
return (
<ul>
{items.listItems.map((value, index) => (
<SortableItem key={`item-${value.id}`} index={index} value={value.id} />
))}
</ul>
);
});
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: "1ef456",
list_id: "654wer",
title: 'List 2',
desc: "description",
listItems: [
{
id: "1hj678",
title: "ListItems3",
listItemsId: "18abf1"
},
{
id: "1oi098",
title: "ListItems4",
listItemsId: "1a49f25"
}
]
},
{
id: "2ef456",
title: 'List 3',
list_id: "254wer",
desc: "description",
listItems: [
{
id: "2hj678",
title: "ListItems5",
listItemsId: "28abf1"
},
{
id: "2oi098",
title: "ListItems6",
listItemsId: "234a49f25"
}
]
}
]
}
};
}
onSortEnd = ({oldIndex, newIndex}) => {
this.setState(({lists}) => ({
lists: arrayMove(lists, oldIndex, newIndex),
}));
};
render() {
return <SortableList items={this.state.item['lists']} onSortEnd={this.onSortEnd} />;
}
}
您需要先遍历项目数组并且不要忘记 return 结果:
items.map(item =>
item.listItems.map((value, index) =>
<SortableItem key={`item-${value.id}`} index={index} value={value.id} />
)
)
你应该改变
items to item
{item.listItems.map((value, index) => (
<SortableItem key={`item-${value.id}`} index={index} value={value.id} />
))}