TypeError：无法在反应BeatifulDnD上读取未定义的属性'map'

Question

我正在尝试将Atlassian / react-beautiful-dnd与React挂钩一起使用 https://github.com/atlassian/react-beautiful-dnd

列表中的重新排序功能正常运行。但是提供程序部分存在问题。

当我拖动可拖动项时，它出现TypeError

我几乎被困在这里。

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const reorder = (list, startIndex, endIndex) =>
{
    const result = Array.from(list);

    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);
    return result;
};
export default function GoogleAnalyticsScreen()
{
    {
        const [state, setState] = React.useState(
            {
                items: ["1", "2", "3"],
                selected: ["4", "5"]
            }
        );
        const onDragEnd = result =>
        {
            const { source, destination } = result;
            if (!result.destination)
            {
                return;
            }
            const state = reorder(
                source.droppableId,
                source.index,
                destination.index
            );
            setState(state);
        }
        return (
            <DragDropContext onDragEnd={onDragEnd}>
                <Droppable droppableId="droppable" type="DraggableItem" key="list">
                    {(_fromProvided, _fromSnapshot) => (
                        <div
                            ref={_fromProvided.innerRef}
                            {..._fromProvided.draggableProps}
                            {..._fromProvided.dragHandleProps}
                        >
                            {state.items.map((fromItem, fromIndex) => (
                                <Draggable draggableId={"drag-" + fromIndex} index={fromIndex} key={fromIndex}>
                                    {(provided, snapshot) => (
                                        <div
                                            ref={provided.innerRef}
                                            {...provided.draggableProps}
                                            {...provided.dragHandleProps}
                                        >drag me</div>
                                    )}
                                </Draggable>
                            ))}
                            {_fromProvided.placeholder}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
        );
    }
}

Answer 1

我自己解决了这个问题。 第32行

setState(state);

支持。

setState({items:state});

那真是愚蠢的错误。