使用Beautiful DND拖拽后如何避免列表API刷新及Invalid Hook报错

这个错误本质是违反了React Hook的调用规则，结合你使用Context + 拖拽库的场景，大概率是以下几个原因导致：

• Hook调用位置不符合要求：你可能将useContext(LangContext)的调用放在了useDrag/useDrop的回调函数、拖拽事件处理函数、循环或者条件判断语句中。Hook只能在React函数组件的最顶层、或者自定义Hook的最顶层调用，不能嵌套在任何子作用域里。
• 拖拽项渲染逻辑错误：你在渲染可拖拽列表项时，使用了普通函数调用而非JSX组件渲染。比如你写的是list.map(item => renderItem(item))而非list.map(item => <DraggableItem key={item.id} data={item} />)，普通函数内部的Hook不会被React识别为合法的组件内Hook调用，拖拽更新列表触发重渲染时就会抛出错误。
• Hook调用顺序被打乱：你在useContext调用之前加了提前return的条件判断，比如if (isDragging) return <Placeholder />，拖拽状态更新时命中该条件导致Hook调用顺序变化，违反了Hook调用顺序必须固定的规则。
• 多React实例冲突：检查项目依赖是否存在多个版本的React实例，拖拽库依赖的React版本和项目使用的React版本不匹配、或者安装依赖时出现版本冲突，都会触发Invalid Hook报错。

1. 把useContext的调用移到组件的最顶层，所有条件判断、return语句之前，需要用到Context值的地方直接引用拿到的变量即可。
2. 所有可拖拽项都封装为独立的React函数组件，用JSX语法渲染，不要用普通函数调用的方式生成渲染内容。
3. 清理package.json和依赖锁文件的重复React依赖，保证全项目只有一个React版本实例。

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