未正确保存或检索古腾堡属性？

Question

在一个可怕的跳入深端的演示中，我正在通过构建一个不仅仅是简单的古腾堡块来体验我的 React 开发的第一部分。愚蠢！

无论如何，我正在制作的块是从自定义 post 类型中提取内容，select 通过 InspectorControls 中 SelectControlbox 的 post ID 编辑。

<SelectControl 
   onChange={ onSelectPost } 
   value={ attributes.selectedpost } 
   label={ __( 'Select a Post' ) } 
   options={ options } 
/>

这工作正常，渲染正常！

selected post ID 在更改值时保存为属性：

const onSelectPost = ( post ) => {
    setAttributes( {
        selectedpost: post,
    } );
};

稍后，我会检查是否已设置，如果已设置，则检索内容并用一些内容填充 innerblocks 模板。

这在第一个编辑屏幕和最终结果中显示一切正常，但是当您返回编辑内容时，它丢失了 selectedpost 属性！

这里是属性 def:

attributes: {
    selectedpost: {
        type: 'number',
        default: 0, 
    },

这是存档：

save: function( props ) {       
    const blockProps = useBlockProps.save();
    const { attributes } = props;
    
    return (
        <div { ...blockProps } key="sandcexercise">
            <InnerBlocks.Content /> 
        </div>
    );  
},

由于我没有指定属性的来源，我希望它被保存为评论并从那里重新加载。

如果我将要输出的属性转换为 p 标签，一切正常！

转换后的属性：

attributes: {
        selectedpost: {
            type: 'text',
            source: 'text',
            selector: 'p.selectedpost',     
        },

并将此行添加到编辑和保存功能中：

<p className="selectedpost">{ attributes.selectedpost }</p>

奇怪的是，我从评论中正确地提取了一些其他属性，只是不是我的 selectpost 号码！

知道我可能做错了什么吗？我对 React 几乎一无所知，上一次我真正愤怒地对 Javascript 做任何事情是在 2002 年，让东西在屏幕上移动，所以我真的被调试塞满了！

Answer 1

总的来说，您提供的代码示例和您的解释表明您在使用 ReactJS 创建 Gutenberg 块和处理属性方面走在正确的道路上，好吧 done/don 不要放弃！

由于您的 selectedpost 属性是一个数字，确保 setAttributes() 保存的值也是使用 parseInt() 的数字，例如：

const onSelectPost = ( post ) => {
    setAttributes( {
        selectedpost: parseInt(post)
    });
};

重新加载时，通过保持值的正确类型（数字），保存的值将与您的 <SelectControl> 中的 'options'（post id）之一相匹配。这也解释了为什么它在您使用 <p> 时有效，因为该值作为字符串存储在 <p>..</p>.

中

提示：使用浏览器控制台调试可以帮助您快速定位问题；控制台中的 React 错误消息在 finding/resolving 问题中很有用，并可能减少挫败感...

未正确保存或检索古腾堡属性？

Gutenberg attributes not being saved or retrieved properly?

wordpress

wordpress-gutenberg