WordPress自定义区块开发：useEffect中setAttributes未正确遍历数组的问题

嘿，我一眼就看出问题出在哪啦！你现在的代码在循环里每次调用setAttributes的时候，都是直接把menuElem替换成只包含当前单个元素的新数组，前面已经添加的元素会被直接覆盖掉，所以最后自然就只剩最后一个符合条件的项咯。

咱们来改一下思路：先把所有符合条件的菜单项筛选出来并转换成你需要的格式，然后一次性把整个数组赋值给menuElem，这样就不会有覆盖的问题了。

修改后的代码应该是这样的：

useEffect(() => {
  apiFetch({ path: "/wp/v2/menu-items/" })
    .then((items) => {
      // 第一步：筛选出属于目标菜单的项
      const validMenuItems = items.filter(item => item.menus === props.attributes.menuID);
      // 第二步：把筛选后的项转换成你需要的结构
      const formattedMenuElems = validMenuItems.map((item, index) => ({
        id: index, // 这里也可以换成item.id，用菜单项自身的ID更可靠
        url: item.url,
        title: item.title.rendered,
      }));
      // 第三步：一次性设置完整的数组
      props.setAttributes({ menuElem: formattedMenuElems });
    })
    .catch(error => {
      // 可以加个错误捕获，方便调试
      console.error('获取菜单项失败:', error);
    });
}, [props.attributes.menuID]);

为啥原来的代码不行？再给你理一理：

• 你用map遍历每个菜单项时，每遇到一个符合条件的项，就直接调用setAttributes把menuElem设为[{当前项}]，相当于每次都把之前的数组完全替换掉了。
• 比如你有3个符合条件的项，第一次set后数组是[项1]，第二次变成[项2]，第三次变成[项3]，最后就只剩项3啦。

另外再给你两个小建议：

1. 尽量不要在循环里调用setAttributes或者React的setState，因为每次调用都会触发组件重新渲染，既影响性能又容易出状态覆盖的问题。
2. 用index作为id虽然能用，但如果菜单项的顺序发生变化，可能会出现id混乱的情况，建议直接用菜单项自身的item.id来作为每个对象的id，这样更稳定。

现在你再去试试修改后的代码，应该就能正常得到完整的菜单数组了，然后在JSX里直接遍历props.attributes.menuElem就可以啦！

备注：内容来源于stack exchange，提问作者Aurélien Clochet