如何让const在map函数执行完成后再加载？

我研究这个问题好几天了，终于发现核心问题：我的const在map函数执行完成前就加载，导致属性数组没法在save.js里正常使用。

edit.js中的相关代码 #

const blockProps = useBlockProps();
const { backgroundColor, textColor, selectedValue, myNumber, menuItems } = attributes;
const updateAttributes = (src, heading, para, href, index) => {
    const theAttributeUpdate = [...menuItems];
    theAttributeUpdate[index] = { image: src, header: heading, excerpt: para, link: href };
    setAttributes({menuItems: theAttributeUpdate})
}

...

{newArray.filter((m, idx) => m.catagory == selectedValue).map((m) => {
        return (
            <div class="blog-stamp">
                <img class="stamp-image" src={m.image} width="200" height="200" />
                <RichText
                    tagName="h3"
                    class="stamp-title"
                    onChange={(heading) => updateAttributes(src, heading, para, href, index)}
                    value={m.label}
                />
                <RichText
                    tagName="p"
                    class="stamp-excerpt"
                    onChange={(para) => updateAttributes(src, heading, para, href, index)}
                    value={m.content}
                />
                <p class="button-parent">
                    <a
                        href={m.link}
                        className="sfs-button"
                        style={{ backgroundColor: backgroundColor, color: textColor }}
                    >
                        {'Read more'}
                    </a>
                </p>
            </div>)
    })}

block.json中的属性配置 #

"menuItems": {
    "type": "array",
    "source": "query",
    "selector": "div",
    "default": [],
    "query": {
        "image": {
            "type": "string",
            "source": "attribute",
            "selector": ".stamp-image",
            "attribute": "src"
        },
        "header": {
            "type": "string",
            "selector": "h3",
            "source": "html"
        },
        "excerpt": {
            "type": "string",
            "selector": "p",
            "source": "html"
        },
        "link": {
            "type": "string",
            "source": "attribute",
            "selector": ".button-parent a",
            "attribute": "href"
        }
    }
},

问题分析与修复方案 #

1. 核心问题拆解
   你误以为是const加载时机的问题，但真正的bug是：map循环里调用updateAttributes时，传入的src、heading、para、href、index都未在循环作用域内定义，且渲染的newArray与属性menuItems的索引未对应，导致更新逻辑完全失效。

2. 具体修复步骤

   • 在map循环中获取当前项的索引，确保与menuItems的索引对应（若newArray基于menuItems生成，直接用循环索引；若为外部数据，需提前做映射关联）
   • 修正RichText的onChange回调，传入当前项的实际值：

     // 修正后的map循环代码
     {newArray.filter((m) => m.catagory == selectedValue).map((m, mapIndex) => {
         // 根据实际场景调整menuIndex，确保对应menuItems中的正确位置
         const menuIndex = mapIndex;
         const currentMenuItem = menuItems[menuIndex] || {};
         return (
             <div class="blog-stamp">
                 <img class="stamp-image" src={m.image} width="200" height="200" />
                 <RichText
                     tagName="h3"
                     class="stamp-title"
                     onChange={(heading) => updateAttributes(m.image, heading, currentMenuItem.excerpt, m.link, menuIndex)}
                     value={currentMenuItem.header || m.label}
                 />
                 <RichText
                     tagName="p"
                     class="stamp-excerpt"
                     onChange={(para) => updateAttributes(m.image, currentMenuItem.header, para, m.link, menuIndex)}
                     value={currentMenuItem.excerpt || m.content}
                 />
                 <p class="button-parent">
                     <a
                         href={m.link}
                         className="sfs-button"
                         style={{ backgroundColor: backgroundColor, color: textColor }}
                     >
                         {'Read more'}
                     </a>
                 </p>
             </div>
         )
     })}
     

   • 确保save.js的渲染结构与edit.js完全一致，Gutenberg才能正确解析并保存menuItems属性

3. 额外注意事项

   • 你当前用扩展运算符创建新数组的写法const theAttributeUpdate = [...menuItems]是正确的，要始终保持不可变更新原则
   • 若newArray是动态加载的数据，需在组件挂载时用useEffect同步初始化menuItems，避免属性与渲染内容脱节

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