如何使用 Gutenberg withSelect 在 .map() 列表中重新渲染

Question

我正在创建 table 内容 Gutenberg 自定义块，它反应性地反映 h2 文本。在 map() 之外，它可以工作。但里面不工作。

请告诉我如何修改此代码。

谢谢。

import { registerBlockType } from "@wordpress/blocks";
import { withSelect, select } from "@wordpress/data";

registerBlockType("theme/toc", {
  title: "TOC",
  icon: "list-view",
  category: "layout",
  edit: withSelect((select) => {
    return {
      blocks: select("core/block-editor").getBlocks(),
    };
  })(Edit),
  save: () => {
    return null;
  },
});

export function Edit(props) {
  const { blocks = [] } = props;
  const headings = [];
  blocks.forEach((el) => {
    if (!(el.name === "core/heading" && el.attributes.level === 2)) {
      return;
    }
    headings.push(el.attributes.content);
  });

  return (
    <div>
      <p>{headings[0]}</p> // this line works
      <ol>
        {headings.map((h2, i) => { // not working
          <li key={i}>
            <a>{h2}</a>
          </li>;
        })}
      </ol>
    </div>
  );
}

Answer 1

只需删除花括号，这样 JSXElemnt 就可以从 map 函数返回。

 <ol>
    {headings.map((h2, i) =>
      <li key={i}>
        <a>{h2}</a>
      </li>;
    )}
  </ol>

还有一点要注意，不建议使用元素索引 i 作为 key 值。你可能想使用一个更独特的值，比如你正在循环的元素中的 id。

如何使用 Gutenberg withSelect 在 .map() 列表中重新渲染

How to rerender inside of .map() list using Gutenberg withSelect

wordpress

wordpress-gutenberg

gutenberg-blocks