3

我有一个组件接收两组数据并且是一个 react-beautiful-dnd 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>
    );
  }

到目前为止，此代码运行良好，并且根据MyDraggableCompdnd 实施指南正确实施并包含{...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
.
.
.
4

1 回答 1

5

这是特定于 react-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".

我将 Draggable/Droppable 中的 api 更改为使用refoverinnerRef并且它工作...

于 2019-02-07T01:20:19.370 回答