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

Posted 2023-02-19

【中文标题】块编辑器给出无效的钩子调用错误

【英文标题】：Block editor giving invalid hook call error

【发布时间】：2021-04-26 00:10:42

【问题描述】：

我正在尝试让 wordpress 块编辑器加载到反应项目中：https://www.npmjs.com/package/@wordpress/block-editor。

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

这是代码：

import 
  BlockEditorProvider,
  BlockList,
  WritingFlow,
  ObserveTyping
 from "@wordpress/block-editor";
import  SlotFillProvider, Popover  from "@wordpress/components";
import  useState  from "@wordpress/element";
import "@wordpress/components/build-style/style.css";
import "@wordpress/block-editor/build-style/style.css";

export default function MyEditorComponent() 
  const [blocks, updateBlocks] = useState([]);

  return (
    <BlockEditorProvider
      value=blocks
      onInput=(blocks) => updateBlocks(blocks)
      onChange=(blocks) => updateBlocks(blocks)
    >
      <SlotFillProvider>
        <Popover.Slot name="block-toolbar" />
        <WritingFlow>
          <ObserveTyping>
            <BlockList />
          </ObserveTyping>
        </WritingFlow>
        <Popover.Slot />
      </SlotFillProvider>
    </BlockEditorProvider>
  );

还有典型的钩子错误：

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.

我在这里设置了一个 codepen 来使用它：https://codesandbox.io/s/sleepy-proskuriakova-op59q

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

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

【参考方案1】：

这是一个有效的codesandbox。

我改变的地方：

react 和 react-dom 到 16.13.1 这是在 @wordpress/element 中使用的版本 必须添加DropZoneProvider 安装@wordpress/block-library并调用registerCoreBlocks

更多代码示例您可以查看the official storybook docs，源代码在底部面板中，在Story 标签下。

【讨论】：

好吧，我要谢谢你！可悲的是，我只能对你的答案和你的问题投赞成票 :-) 但我也想让你知道，你帮助了我......所以谢谢你！