在 React（WordPress 块编辑器）中使用 setAttributes 设置属性后，我得到对象而不是数组。我的代码有什么问题？

Question

我正在尝试通过映射数组来动态创建和更改组件的值。最初一切正常（当我通过默认值映射时），直到我到达应该设置属性的 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 ??
    } );
};

我做错了什么？

非常感谢！

Answer 1

{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;
    }
} );}

Answer 2

你在哪里调用props.setAttributes，属性是一个对象的原因是因为你正在创建一个对象！您需要以下内容：

props.setAttributes( {
  padding: paddingAttr
} );

阅读有关属性 shorthand 符号的更多信息 MDN。

此外，正如我所说，您需要修复对 Array#map 的调用。将其更改为以下内容：

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

在 React（WordPress 块编辑器）中使用 setAttributes 设置属性后，我得到对象而不是数组。我的代码有什么问题？

I get object instead of array after setting an attribute with setAttributes in React (WordPress Block Editor). What's wrong with my code?

javascript

jsx

reactjs

wordpress-gutenberg