Konwertuję tablicę pobieraną dla wywołania apiFetch na atrybuty za pomocą funkcji .map. Użyłem tego artykułu jako odniesienia. Działało, ale teraz przestało, więc moje pytanie brzmi: dlaczego moja tablica jest pusta? Czy nieprawidłowo zmapowałem atrybuty? A może po prostu nie możesz tego robić z atrybutami?

Chcę spróbować zmapować wartości apiFetch na tablicę atrybutów, które zostaną pobrane przez mój zapis. js i wyświetlony. Dołączyłem mój kod z nadzieją, że ktoś będzie mógł go rozpakować i powiedzieć mi, gdzie się wygłupiłem.

Jestem nowicjuszem więc proszę o wyrozumiałość.

Oto mój kod: edit.js

const { backgroundColor, textColor, selectedValue, myNumber, menuItems2} = attributes;
...
    function upadateMenuItems(src, heading, para, href, index){
        const updateMenuItems= [...menuItems2];
        updateMenuItems[index]= {src: src, heading: heading, para: para, href: href};
        setAttributes({menuItems2: updateMenuItems});
    }
...
{options.filter((m, idx) => idx < myNumber && m.catagory == selectedValue).map((m) => { 
    
        return (
        <div class="blog-stamp">
            <img src={m.image} width="200" height="200" />
            <RichText 
                tagName="h3"
                class="stamp-title"
                onChange={(heading) => upadateMenuItems(src, heading, para, href)}
                value={ m.label }
            />
            <RichText 
                tagName="p"
                class="stamp-excerpt"
                onChange={(para) => upadateMenuItems(src, heading, para, href)}
                value={m.content}
            />
            <p class="button-parent">
            <ExternalLink 
                href={ m.link}
                className="sfs-button" 
                style={{ backgroundColor: backgroundColor, color: textColor }}
            >
                    { 'Read more' }
            </ExternalLink>
                </p>
            </div>) })}
...

blok.json

    "attributes": {
        "content": {
          "type": "string",
          "source": "html",
          "selector": "h2"
        },
        "backgroundColor": {
            "type": "string"
        },
        "textColor": {
            "type": "string"
        },
        "selectedValue": {
            "type":"string",
            "default": "Uncategorised"
        },
        "myNumber":{
            "type":"number",
            "default": "4"

        },
        "menuItems2":{
            "type":"array",
            "source": "query",
            "selector": "div",
            "default": [],
            "query" : {
                "src": {
                    "type":"string",
                    "source": "attribute",
                    "selector": "img",
                    "attribute": "src"
                },
                "heading": {
                    "type": "string",
                    "selector": "h3.stamp-title",
                    "source" : "text"
                },
                "para": {
                    "type": "string",
                    "selector": "p.stamp-excerpt",
                    "source" : "text"
                },
                "href": {
                    "type":"string",
                    "source": "attribute",
                    "selector": "a",
                    "attribute": "href"
                }
            }
        }
      },

zapisz.js

import { useBlockProps } from '@wordpress/block-editor';

export default function save({attributes}) {
    const { backgroundColor, textColor, selectedValue,myNumber, menuItems2  } = attributes;
    const mapFile = menuItems2 && menuItems2.map(({src, heading, para, href}) => { 
        return (
        <div class="blog-stamp"><img src={src} width="200" height="200" /><h3 class="stamp-title">{heading}</h3><p class="stamp-excerpt">{para}</p><p class="button-parent"><a href={href} class="sfs-button" style={{ backgroundColor: backgroundColor, color: textColor }}>Read more</a></p></div>) });
    return (
        <div{ ...useBlockProps.save() }>
        <p class="blog-stamp-parent">{mapFile}</p>
        </div>
    );
}

Z góry dziękuje za twoją pomoc