属性在古腾堡中没有保存

Question

我正在尝试为Wordpress Gutenberg创建一个自定义块。

我有以下属性:

"icon": {
"type": "object",
"source": "html",
"selector": ".jig_defbox-icon"
},
"color": {
"type": "string",
"default": "#919191"
}

在我的EditJS中，我尝试将来自颜色选择器和radiogroup的值存储到这些属性中。

const [ toggled, setToggled ] = useState( );
return(
<InspectorControls>
<ColorPalette
colors={[
{name: 'lightgray', color: '#d8d8d8'},
{name: 'darkgray', color: '#919191'},
{name: 'red', color: '#dc1a22'}
]}
disableCustomColors={true}
onChange={(value) => {props.setAttributes({color: value});}}
value={props.attributes.color}
clearable={false}
/>
<RadioGroup
onChange={ (value) => {setToggled(value);props.setAttributes({icon: value});} }
checked={props.attributes.icon}     
>
{
str_array.map( 
item => ( <Radio value={item}><Icon icon={icon_getter(item);}/></Radio>)
)
}
</RadioGroup>
</InspectorControls>
)

在我的SaveJS中，我尝试根据这些属性呈现标记:

const {attributes} = props
<div style={{"fill": attributes.color}}>
<Icon icon={icon_getter(attributes.icon)}/>
</div>

目标是根据我的radiogroup上的选择呈现svg图标。

问题1:在后端每次新的编辑会话中，我的radiogroup的选择都消失了，即使使用useState(尝试不使用useState)

问题2:每次新的编辑会话，都会记录一个控制台错误，表示后正文标记与保存函数返回的标记不匹配，因为保存标记不包含图标属性内容

就我所能包含的问题而言，图标属性没有正确保存。我试着保存"钥匙"。作为字符串和对象的图标。如果我在保存函数中记录该值，则该值为空，而所选颜色在前端和后端均按预期工作。

Answer 1

我能够通过重新思考获取图标的概念来修复它。

显然，古腾堡试图将图标的代码存储到数据库中，但没有将密钥存储到数据库中。当加载后端编辑器时，icon_getter函数接收到一个空值，因此，post body和save函数代码之间的差异。

我改变了我的editJS:

<RadioGroup
onChange={ (value) => {props.setAttributes({icon: value});} }
checked={props.attributes.icon}     
>
{
my_icons_as_list.map( 
item => ( <Radio value={item}><Icon icon={my_icons[props.attributes.icon];}/></Radio>)
)
}
</RadioGroup>

和我的saveJS:

<Icon icon={ my_icons[ attributes.icon ] } />