response-beautiful-dnd: Не удается найти элемент маркера перетаскивания внутри Draggable

Question

У меня есть компонент, который получает два набора данных и является Reaction-Beautiful-DDD DragDropContext, как показано ниже

 render() {
    let index = -1;
    const dataSetOne = this.props.store!.getdata(1);
    const dataSetTwo = this.props.store!.getData(2);
    const allData = this.props.anotherStore!.getAllData();

    return (
        <DragDropContext onDragEnd={this.onDragEnd}>
          <Droppable droppableId="SIDE_MENU" direction="vertical" type="sections">
            {(provided, snapshot) => (
              <div
                {...provided.droppableProps}
                ref={provided.innerRef}
                onScroll={(e) => e.currentTarget.scrollTop}
              >
                {dataSetOne!.map((a, i) => {
                  index = i;
                  const currentData:any= allData.filter(/*logic*/)
                  return (
                    <MyDraggableComp
                      key={a.id!}
                      aes={a}
                      index={index}
                      data={currentData}
                    />
                  );
                })}
               {dataSetTwo.length > 0 ? (
                <MyDraggableComp
                  key="SOMEKEY"
                  aes={null}
                  index={index + 1}
                  data={dataSetTwo}
                />
                ) : null}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext>
    );
  }

до сих пор этот код работал отлично, и MyDraggableComp правильно реализован в соответствии с руководством по реализации dnd и содержит {...sectionProvided.dragHandleProps}

теперь изменили бэкэнд, и dataSetTwo никогда не является нулевым или пустым, поэтому хотел удалить условие и всегда отображать его.

, но перемещаем условие dataSetTwo>0 и просто

            <MyDraggableComp
              key="SOMEKEY"
              aes={null}
              index={index + 1}
              data={dataSetTwo}
            />

вызывает эту ошибку, что я даже не понимаю отношение к делу и что искать? Может кто-нибудь объяснить мне, что происходит и как это исправить?

Error: Invariant failed: 
      Cannot find drag handle element inside of Draggable.
      Please be sure to apply the {...provided.dragHandleProps} to your Draggable

      More information: https://github.com/atlassian/react-beautiful-dnd#draggable

▼ 21 stack frames were expanded.
invariant
node_modules/tiny-invariant/dist/tiny-invariant.esm.js:11
getDragHandleRef
node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js:6165
DragHandle.componentDidMount
node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.esm.js:7351
commitLifeCycles
node_modules/react-dom/cjs/react-dom.development.js:15961
commitAllLifeCycles
node_modules/react-dom/cjs/react-dom.development.js:17262
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:149
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:199
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:256
commitRoot
node_modules/react-dom/cjs/react-dom.development.js:17458
completeRoot
node_modules/react-dom/cjs/react-dom.development.js:18912
performWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:18841
performWork
node_modules/react-dom/cjs/react-dom.development.js:18749
performSyncWork
node_modules/react-dom/cjs/react-dom.development.js:18723
batchedUpdates$1
node_modules/react-dom/cjs/react-dom.development.js:18936
reactionScheduler
node_modules/mobx/lib/mobx.module.js:3626
runReactions
node_modules/mobx/lib/mobx.module.js:3602
.
.
.

Answer 1

Это специфично для response-beautiful-dnd и вашей версии styled-components - но вы видели это предупреждение в консоли?:

The "innerRef" API has been removed in styled-components v4 in favor of React 16 ref forwarding, use "ref" instead like a typical component. "innerRef" was detected on component "styled.div".

Я изменил API в Draggable / Droppable, чтобы использовать ref над innerRef, и это сработало ...