如何解决react中不变的失败错误

Question

我正在尝试为我的反应项目构建一个拖放列表。我正在使用react-beautiful-dnd 库。但我面临这个错误：

错误：不变失败：找不到所需的上下文

我发现是可拖动组件引发了此错误

<Draggable draggableId={props.id} index={props.index}>
{(provided, snapshot) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
   Some code goes in here....
</div>
)}

<Draggable/>

然后我发现了这个github问题：https://github.com/atlassian/react-beautiful-dnd/issues/948 根据这里建议的解决方案，我添加了一个样式函数

const getStyle = (style, snapshot, backgroundColor) => {
    return {
      ...style,
      borderBottomColor: backgroundColor,
      backgroundColor: `${backgroundColor}`,
    };
  };

然后将样式添加到div中

<Draggable draggableId={props.id} index={props.index}>
{(provided, snapshot) => (
<div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} style= 
{getStyle(provided.draggableProps.style, snapshot)>
   Some code goes in here....
</div>
)}
<Draggable/>

但我仍然无法解决这个问题...我能做些什么来解决这个问题？

Answer 1

我遇到了同样的问题。得出了以下解决方案：

从可拖动文档中，

<Draggable /> components can be dragged around and dropped onto <Droppable />s. 
A <Draggable /> must always be contained within a <Droppable />."

尝试用 包装你的Draggable组件Droppable，像这样

    <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="some_id">
          {provided => (
            <div ref={provided.innerRef} {...provided.droppableProps}>
              <Draggable draggableId={props.id} index={props.index}>
                {(provided, snapshot) => (
                  <div {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
                    Some code goes in here....
                  </div>
                )}
              </Draggable>
            </div>
          )}
        </Droppable>
      </DragDropContext>