Я получаю объект вместо массива после установки атрибута с помощью setAttributes в React (редактор блоков WordPress). Что не так с моим кодом? - PullRequest
Новая
       88

Я получаю объект вместо массива после установки атрибута с помощью setAttributes в React (редактор блоков WordPress). Что не так с моим кодом?

0 голосов
/ 02 августа 2020

Я пытаюсь динамически создавать и изменять значения компонентов с отображением массива. Сначала все работает нормально (когда я отображаю значения по умолчанию), пока я не доберусь до функции setPadding, которая должна установить атрибут. Затем мой массив превращается в объект, в результате чего второе сопоставление вызывает ошибку - react-dom.min.js?ver=16.9.0:103 TypeError: attributes.padding.map is not a function. Вот код:

Атрибут: 

padding: {
    type: 'array',
    default: [
        {   name: 'top',
            image: `${ url }images/padding-top.svg`,
            v: 10,
        },
        {
            name: 'bottom',
            image: `${ url }images/padding-bottom.svg`,
            v: 10,
        },
    ],
},

Визуализация компонента (примечание attribiutes.padding отображается - это отлично работает со значениями по умолчанию): 

<PanelBody
    title="Test"
    initialOpen={ true }
>
    { attributes.padding.map( ( attr ) => (
    <div className="component-row-wrapper margin-padding">
        <PanelRow>
            <RangeControl
                label={
                    <img src={ attr.image } alt="" />
                }
                value={ attr.v }
                onChange={ ( value ) => setPadding( attr.name, value ) }
                min={ 0 }
                max={ 300 }
            />
        </PanelRow>
    </div>
    ), ) }
</PanelBody>

И, наконец, функция setPadding (с console.log перед самой функцией - это находится где-то между edit( props ) и рендерингом компонента): 

console.log( attributes.padding ); // initially it works fine, after setPadding it logs object instead of array.

const setPadding = ( name, value ) => {
    const paddingAttr = attributes.padding;

    {paddingAttr.map( r => {
        if ( name === r.name ) {
            r.v = value;
        }
    } );}

    console.log( paddingAttr ); // works fine, being displayed as array every time!

    props.setAttributes( {
        padding: { paddingAttr }, // saves 'padding' attribute as object 'paddingAttr: Array(2)...' instead of array ??
    } );
};

Что я здесь делаю не так?

Большое спасибо!

Ответы [ 2 ]

1 голос
/ 02 августа 2020

Когда вы вызываете props.setAttributes, причина, по которой атрибут является объектом, заключается в том, что вы создаете объект! Вам потребуется следующее: 

props.setAttributes( {
  padding: paddingAttr
} );

Подробнее о сокращенной записи свойств на MDN .

Кроме того, как я уже сказал, вам нужно будет исправить этот вызов Array#map. Измените его на следующее: 

paddingAttr = paddingAttr.map( r => {
  if ( name === r.name ) {
    r.v = value;
  }
  return r;
} );
0 голосов
/ 02 августа 2020 
{paddingAttr.map( r => {
    if ( name === r.name ) {
        r.v = value;
    }
} );}

Здесь (причина TypeError: attributes.padding.map не является функцией), paddingAttr не является массивом, измените его на 

{paddingAttr.default.map( r => {
    if ( name === r.name ) {
        r.v = value;
    }
} );}
...