TypeError:无法读取React BeatifulDnD上未定义的属性'map'

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TypeError:无法读取React BeatifulDnD上未定义的属性'map'相关的知识,希望对你有一定的参考价值。

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

看起来列表内的重新排序功能正常工作。但是提供者部分有问题。

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

我几乎被困在这里。

enter image description here

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

我已自行解决此问题。第32行

setState(state);

支持。

setState({items:state});

这是一个非常愚蠢的错误。

以上是关于TypeError:无法读取React BeatifulDnD上未定义的属性'map'的主要内容,如果未能解决你的问题,请参考以下文章

TypeError:无法使用 React 读取未定义的属性

React.js - TypeError:无法读取未定义的属性'catch'

TypeError:无法读取 null 的属性(读取“推送”)react.js

TypeError:无法读取 React 未定义的属性“标题”

Graphql,React - TypeError:无法读取未定义的属性“地图”

React Native - TypeError:无法读取未定义的属性“干净”