集成react-beautiful-dnd触发React无效Hook调用错误求助

你遇到的这个问题几乎都是依赖版本不兼容或者项目中存在多个React实例导致的，以下是针对性的解决步骤：

1. 核对版本兼容性 #

react-beautiful-dnd依赖React Hooks特性，因此必须使用React 16.8.0及以上版本。另外React 18发布后，部分旧版react-beautiful-dnd会出现兼容问题：

• 执行命令查看当前依赖版本：

  npm list react react-dom react-beautiful-dnd
  

• 对照react-beautiful-dnd的版本说明，确保它与你的React版本匹配。比如React 18可尝试使用react-beautiful-dnd@13.1.1（目前相对稳定的兼容版本）。

2. 排查重复的React实例 #

如果项目和react-beautiful-dnd各自安装了不同版本的React，就会触发Hook调用错误：

• 先删除依赖文件重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 若问题依旧，在项目构建配置（如webpack.config.js、craco.config.js）中添加别名，强制所有依赖使用项目根目录的React：

  module.exports = {
    resolve: {
      alias: {
        'react': require.resolve('react'),
        'react-dom': require.resolve('react-dom')
      }
    }
  };
  

• 使用yarn的话，直接执行yarn dedupe合并重复依赖包。

3. 确认项目环境配置 #

• 若使用Create React App，不要混用全局React或CDN引入的React，确保所有组件都使用项目依赖中的React包。
• 检查项目中是否存在类组件内调用Hook的情况（全局环境配置问题也可能触发该错误）。

4. 调整react-beautiful-dnd版本 #

如果上述方法无效，尝试切换版本：

• 降级到稳定兼容版：

  npm install react-beautiful-dnd@13.1.1
  

• 或升级到最新兼容版（需查看官方更新日志确认支持你的React版本）。

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