如何触发块的重新渲染？

Question

在 WordPress Gutenberg 插件中

hooks_addFilter_editor_blockEdit = (BlockEdit) => {
 return (props) => {
  apiFetch({url: 'https://example.com/api/'+props.attributes.content
  }).then(_return => {
   props.attributes.content = _return;
   // What should I use here to force re-render the block?
  })
 return ( <BlockEdit { ...props } /> );
 }
}

wp.hooks.addFilter( 'editor.BlockEdit', 'my-plugin-slug', hooks_addFilter_editor_blockEdit );

对于上面的代码，我的插件将 props.attributes.content 发送到外部 API，并异步更新它。在视觉上，由于许多默认的 gutenberg 块使用 props.attributes.content 来显示块的内容（例如段落块），因此该内容会在编辑器上自动更新，但不会立即更新。仅当我的光标离开该块，或者当我将输入焦点移出该块时，才会重新渲染该块。

我可以在上面的代码中添加什么来强制编辑器在 apiFetch 调用成功后立即显示更新的内容？

Answer 1

试试这个是否适合你：

hooks_addFilter_editor_blockEdit = (BlockEdit) => {
 return (props) => {
 // Destructure "props"
 const { attributes, setAttributes } = props;
  apiFetch({url: 'https://example.com/api/'+attributes.content
  }).then(_return => {
   // What should I use here to force re-render the block?
   setAttributes( { content: _return } );
  })
 return ( <BlockEdit { ...props } /> );
 }
}

wp.hooks.addFilter( 'editor.BlockEdit', 'my-plugin-slug', hooks_addFilter_editor_blockEdit );

尽管如此，在输入块时，在您的 api 响应之前可能会有轻微的延迟。另外，也许您需要将 BlockEdit 包装在 HigherOrderComponent 中。

如何触发块的重新渲染？

How do I trigger a re-rendering of a block?

javascript

reactjs

asynchronous

rendering

wordpress-gutenberg