如何解决如何解决古腾堡代码块错误-组件正在更改要控制的url类型的不受控制的输入
当我在buttonUrl输入中添加一个值时，我会收到此错误。
一个组件正在更改要控制的url类型的不受控制的输入。输入元素不应从不受控制切换为受控制（反之亦然）。在组件的生命周期中决定使用受控还是不受控制的输入元素。
这是我的代码块。
我已经很久了。干杯
( function ( blocks,editor,i18n,element,components,_ ) {
const __ = i18n.__;
const el = element.createElement;
const RichText = editor.RichText;
const MediaUpload = editor.MediaUpload;
const InspectorControls = editor.InspectorControls;
const PanelBody = components.PanelBody;
const TextControl = components.TextControl;
const SelectControl = components.SelectControl;
blocks.registerBlockType('unify/about-block',{
title: __('unify About Block','unify'),icon: 'align-left',category: 'layout',attributes: {
title: {
type: 'array',source: 'children',selector: 'h2',},subhead: {
type: 'array',selector: 'h3',content: {
type: 'string'
},mediaID: {
type: 'number',default: 0
},mediaURL: {
type: 'string',source: 'attribute',selector: 'img',attribute: 'src',buttonText: {
type: 'string',default: ''
},buttonUrl: {
type: 'url',blockColor: {
type: 'string',default: 'brand-dark-blue'
},edit: function ( props ) {
const attributes = props.attributes;
const onSelectimage = function ( media ) {
return props.setAttributes({
mediaURL: media.url,mediaID: media.id,});
};
return el(
'div',{
className: props.className
},el(
'div',{ className: 'column block-content' },el(
RichText,{
tagName: 'h2',inline: true,placeholder: __('Title',value: attributes.title,onChange: function ( value ) {
props.setAttributes({ title : value });
},}
),{
tagName: 'h3',placeholder: __('Subhead',value: attributes.subhead,onChange: function ( value ) {
props.setAttributes({ subhead : value });
},{
tagName: 'p',placeholder: i18n.__('Content',value: attributes.content,onChange: function ( value ) {
props.setAttributes({ content : value });
}
}
),el(
'a',{
className: 'components-button button button-large is-primary',href: attributes.buttonURL
},attributes.buttonText
)
),{
className: 'column block-image'
},el(
MediaUpload,{
onSelect: onSelectimage,allowedTypes: 'image',value: attributes.mediaID,render: function ( obj ) {
return el(
components.Button,{
className: attributes.mediaID ? 'image-button' : 'button button-large',onClick: obj.open
},! attributes.mediaID ? __('Upload Image','unify') : el('img',{ src: attributes.mediaURL })
);
},}
)
),el(
InspectorControls,{
key: 'inspector'
},el(
PanelBody,{ title: i18n.__('Button Link'),className: 'block-button-link',initialOpen: true },el(
TextControl,{
type: 'url',label: i18n.__('Enter the destination URL for the button'),value: props.attributes.buttonURL,onChange: function ( newButtonURL ) {
console.log(newButtonURL);
props.setAttributes({ buttonURL: newButtonURL });
}
}
),{
type: 'text',label: i18n.__('Button Text',value: attributes.buttonText,onChange: function (newButtonText) {
props.setAttributes({ buttonText: newButtonText })
}
}
)
),{ title: i18n.__('Color Settings'),className: 'block-color',initialOpen: false },el(
SelectControl,{
type: 'string',label: i18n.__('Choose the highlight color for the block'),value: attributes.blockColor ? attributes.blockColor : '',options: [{
label: 'Dark Blue',value: 'brand-dark-blue'
},{
label: 'Light Blue',value: 'brand-blue'
},{
label: 'Green',value: 'brand-green'
},{
label: 'Purple',value: 'brand-purple'
}],onChange: function ( value ) {
props.setAttributes({ blockColor : value });
},}
),),)
)
},save: function ( props ) {
const attributes = props.attributes;
return el(
'section',{
className: 'about-block-section ' + attributes.blockColor
},{
className: 'grid-container'
},el(
'div',{
className: 'grid-x grid-padding-x align-center-middle'
},el(
'div',{
className: 'cell small-12 medium-6 large-6 small-order-2 medium-order-1 about-block-image-outer'
},el(
'div',{
className: 'about-block-image square-aspect-ratio'
},attributes.mediaURL ? el(
'img',{
src: attributes.mediaURL
}
) : ''
),{
className: 'cell small-12 medium-6 large-5 large-offset-1 small-order-2 medium-order-1 about-block-content-outer'
},attributes.title ? el(
RichText.Content,{
tagName: 'h2',className: 'about-block-content-title',}
) : '',attributes.subhead ? el(
RichText.Content,{
tagName: 'h3',className: 'about-block-content-subhead',attributes.content ? el(
RichText.Content,{
tagName: 'p',className: 'about-block-content-body',value: attributes.content
}
) : '',attributes.buttonURL && attributes.buttonText ? el(
'a',{
href: attributes.buttonURL,className: 'button about-block-content-button'
},attributes.buttonText,el(
'i',{ className: 'fas fa-arrow-right'}
)
) : ''
)
)
)
)
},});
} )(
window.wp.blocks,window.wp.blockEditor,window.wp.i18n,window.wp.element,window.wp.components,window._
);
解决方法
这可能是在您解决此问题很久之后才解决的，但我相信它会对其他人有所帮助。该问题通常归结为最初将组件的值设置为 undefined。见A component is changing an uncontrolled input of type text to be controlled error in ReactJS
来自您的错误消息：
组件正在更改要控制的 url 类型的不受控制的输入。输入元素不应从不受控制切换到受控制（反之亦然）。决定在组件的生命周期内使用受控或非受控输入元素。
您有一个 URL 类型的组件 - TextControl，传递给它的值为 value: props.attributes.buttonURL
因此，基于此，我相信 buttonURL 在某个时候是 undefined，这会导致该错误。要解决此问题，请在 buttonURL 中为 edit 设置默认值。
edit: function ( props ) {
const attributes = props.attributes;
const buttonURL = props.attributes && props.attributes.buttonURL ?? props.attributes.buttonURL : '' // Decide on an appropriate default
const onSelectImage = function ( media ) {
return props.setAttributes({
mediaURL: media.url,mediaID: media.id,});
};
然后在 TextControl 组件中使用它 - value: props.attributes.buttonURL 变成 value: buttonURL
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
