Reactjs 块编辑器给出无效的钩子调用错误

我正在尝试将wordpress块编辑器加载到react项目中：

我已经完全按照npm页面上的示例设置了它，但是它给出了一个无效的钩子错误。我想这可能是由于错误提示的版本不匹配造成的

代码如下：

导入{
BlockEditorProvider，
封锁名单，
写流，
观察
}从“@wordpress/block editor”；
从“@wordpress/components”导入{SlotFillProvider，Popover}”；
从“@wordpress/element”导入{useState}”；
导入“@wordpress/components/build style/style.css”；
导入“@wordpress/block editor/build style/style.css”；
导出默认函数MyEditorComponent（）{
const[blocks，updateBlocks]=useState（[]）；
返回(
更新块（块）}
onChange={（块）=>updateBlocks（块）}
>
);
}

以及典型的钩形误差：

Error
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See [link] for tips about how to debug and fix this problem.

我已经在这里设置了一个代码笔：

我查阅了wordpress版本的react，它似乎是16.6.3，所以在sandbox中设置它，并使用了旧版本的react脚本（2.1.8），当时使用的是16.6.2，但没有错误更改。我尝试了几种版本的组合，没有任何变化

究竟是什么导致了这个错误？如何才能加载此组件？

这是一个正在工作的组件

我改变的事情：

react

和

react dom

到

16.13.1

，这是

@wordpress/element

不得不添加

DropZoneProvider

安装

@wordpress/block库

并调用

registerCoreBlocks

---

您可以查看更多的代码示例，源代码位于底部面板的

故事
选项卡下。
我必须感谢您！遗憾的是，我只能投票支持你的答案和你的问题：-），但我也想让你知道，你帮了我的忙。。谢谢你！不客气。很高兴这有帮助。