使用React DnD时触发Invalid hook call错误，页面无显示求排查

你提供的App组件代码本身没有问题，错误的根源大概率在你导入的DragDrop组件中。以下是几种常见原因和对应的解决方法：

• DragDrop是类组件却使用了React DnD的Hooks
  React DnD的useDrag、useDrop等Hooks只能在函数组件的顶层作用域中使用，如果你的DragDrop是类组件，必须改用React DnD提供的高阶组件（如DragSource、DropTarget）来实现拖拽功能。

  错误示例（类组件用Hooks）：

  class DragDrop extends React.Component {
    render() {
      const [{ isDragging }, drag] = useDrag({ /* ... */ }); // 错误：类组件中不能用Hooks
      return <div ref={drag}>...</div>;
    }
  }
  

  正确写法（类组件用高阶组件）：

  import { DragSource } from 'react-dnd';
  
  class DragDrop extends React.Component {
    render() {
      const { connectDragSource, isDragging } = this.props;
      return connectDragSource(<div style={{ opacity: isDragging ? 0.5 : 1 }}>可拖拽元素</div>);
    }
  }
  
  const dragSource = {
    beginDrag(props) {
      return { /* 拖拽数据 */ };
    }
  };
  
  function collect(connect, monitor) {
    return {
      connectDragSource: connect.dragSource(),
      isDragging: monitor.isDragging()
    };
  }
  
  export default DragSource('ITEM_TYPE', dragSource, collect)(DragDrop);
  

• DragDrop函数组件中Hooks的使用违反规则
  如果DragDrop是函数组件，检查是否将Hooks放在了条件判断、循环、嵌套函数或try/catch块中。Hooks必须始终在函数组件的顶层调用。

  错误示例：

  function DragDrop() {
    if (someCondition) {
      const [{ isDragging }, drag] = useDrag({ /* ... */ }); // 错误：Hooks在条件判断内
    }
    return <div>...</div>;
  }
  

  正确写法：

  function DragDrop() {
    const [{ isDragging }, drag] = useDrag({ /* ... */ }); // 顶层调用Hooks
    return <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>可拖拽元素</div>;
  }
  

• React版本不兼容
  确保你的React版本满足React DnD的要求：React DnD v14+ 需要React 16.8.0+（支持Hooks的版本），如果你的React版本过低，升级到符合要求的版本即可。

排查完DragDrop组件的问题后，重新运行项目，应该就能正常显示页面内容了。

内容的提问来源于stack exchange，提问作者Vithursan Thevendran