如何解决反应中不变的失败错误答案

【问题标题】：How to solve invarient failed error in react如何解决反应中不变的失败错误
【发布时间】：2021-01-22 19:53:12
【问题描述】：

我正在尝试为我的 react 项目构建一个拖放列表。我正在使用 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/>

但是，我仍然无法解决这个问题...我可以做些什么来解决这个问题？

【问题讨论】：

标签： reactjs drag-and-drop draggable

【解决方案1】：

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

来自Draggable docs?，

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

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

    <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>

【讨论】：