d'Economía.net

WORDPRESS

desarrollo de complementos – error: no se permite cambiar el usoSeleccionar de mapeo a mapeo


Aquí está mi error.

Aquí está mi código edit.js


import { __ } from '@wordpress/i18n';
import {
    useBlockProps,
    InspectorControls,
    PanelColorSettings
} from '@wordpress/block-editor';
import {
    PanelBody,
    PanelRow
} from '@wordpress/components';
import { useState } from '@wordpress/element';
import './editor.scss';
import {catagories}from './container';
import {mapFile}from './app';
export default function Edit({ attributes, setAttributes }) {
    const blockProps = useBlockProps();
    const { backgroundColor, textColor } = attributes;

    const updateGroupId = (val) => {
        setAttributes({ GroupId: parseInt(val) });
    }
    const onChangeBackgroundColor = (BackgroundColor) => {
        setAttributes({ backgroundColor: BackgroundColor })
    }
    const onChangeTextColor = (TextColor) => {
        setAttributes({ textColor: TextColor })
    }   
    const stringArray = catagories.map(JSON.stringify);
    const uniqueStringArray = new Set(stringArray);
    const uniqueArray = Array.from(uniqueStringArray, JSON.parse);
    const [selectedValue, setSelectedValue] = useState('vtalk');
    const handleSelectChange = (event) => {
          setSelectedValue(event.target.value);
          console.log(event.target.value);
        }
    return (
        <div {...blockProps}>
            <InspectorControls>
                <PanelColorSettings
                    title={__('Button Color settings', 'sfs-block')}
                    initialOpen={false}
                    colorSettings={[
                        {
                            value: textColor,
                            onChange: onChangeTextColor,
                            label: __('Button Text color', 'sfs-block')
                        },
                        {
                            value: backgroundColor,
                            onChange: onChangeBackgroundColor,
                            label: __('Button Background color', 'sfs-block')
                        }
                    ]}
                />
                <PanelBody
                    title={__('catagory filter', 'sfs-block')}
                    initialOpen={true}
                >
                    <PanelRow>
                        <fieldset>
                        <select value={selectedValue} onChange={handleSelectChange}>
                                {uniqueArray.map((cat) => {
                                    return <option value={cat.catagory}>{cat.catagory}</option>
                                })}
                            </select>
                        </fieldset>
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
            {console.log(uniqueArray)}
            <p class="blog-stamp-parent">{mapFile}</p>
            </div>

    );
} 

Guardar.js

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
import {mapFile}from './app';
/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into `post_content`.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
 *
 * @return {Element} Element to render.
 */
export default function save() {
    const [selectedValue] = useState('vtalk');
    return (
        <div{ ...useBlockProps.save() }>
        <p class="blog-stamp-parent">{mapFile}</p>
        </div>
    );
}

Aquí es donde uso la función de mapa en app.js

import {options}from './container';
export const mapFile = options.filter((m, idx) => idx < 5 && m.catagory == selectedValue).map((m) => { return (<div class="blog-stamp"><img src={m.image} width="200" height="200" /><h3 class="stamp-title">{m.label}</h3><p class="stamp-excerpt">{m.content}</p><p class="button-parent"><a href={m.link} class="sfs-button" style={{ backgroundColor: backgroundColor, color: textColor }}>Read more</a></p></div>) });

No estoy seguro de cómo solucionar el error useSelect. Llevo días buscando pero no encuentro solución. Cualquier ayuda será apreciada.



Recent Questions – WordPress Development Stack Exchange

RELACIONADOS