javascript - 未捕获（承诺中）类型错误：无法读取未定义的属性“模式”

Question

我对 React / Gutenberg 很陌生，因此我为任何初学者的错误道歉。

我创建了我自己的 Gutenberg Block，我在两个状态之间切换（正在工作），但是一旦我添加this.state.mode 到我的save: function(props){}我得到这个错误： Uncaught (in promise) TypeError: Cannot read property 'mode' of undefined 我搜索了我能找到的关于这个错误的所有内容，但 99% 的答案与函数的“绑定”和我所做的。有谁知道这里有什么问题？谢谢！

const el = wp.element.createElement;
    const {
      registerBlockType
    } = wp.blocks;
    const {
      __
    } = wp.i18n;
    const {
      RichText,
      InspectorControls
    } = wp.editor;
    const {
      Fragment,
      withAPIDate,
      Component
    } = wp.element;
    const {
      TextControl,
      CheckboxControl,
      RadioControl,
      SelectControl,
      TextareaControl,
      ToggleControl,
      RangeControl,
      Panel,
      PanelBody,
      PanelRow
    } = wp.components;
    const {
      withState
    } = wp.compose;

    class MyToggleControl extends Component {
      constructor(props, context) {
        super(props, context);
        this.toggleon = this.toggleon.bind(this);
        this.toggleoff = this.toggleoff.bind(this);
        this.state = {
          label: 'No-Togglemode',
          arrow: false,
          mode: "no-toggle",
          onChange: this.toggleon,

        };
      }

      toggleon() {
        this.setState({
          label: 'Togglemode',
          arrow: !this.state.arrow,
          mode: "toggle",
        });
      }

      toggleoff() {
        this.setState({
          label: 'No-Togglemode',
          arrow: !this.state.arrow,
          mode: "no-toggle",
        });
      }



         render() {
        if (this.state.mode === 'no-toggle') {
          return el(PanelRow, {},
            el(ToggleControl, {
              label: this.state.label,
              mode: "no-toggle",
              onChange: this.toggleon,
            }));

        }
        if (this.state.mode === 'toggle') {
          return el(PanelRow, {},
            el(ToggleControl, {
              label: this.state.label,
              mode: "toggle",
              onChange: this.toggleoff,
            }));

        }

      }
    }



    registerBlockType("timogede/icon-list", {
      title: __("Icon List"),
      icon: "lock",
      category: "common",
      attributes: {

        mode: {
          type: 'string',
        }

      },

      edit: function(props) {
        return el(Fragment, {},

          /*
           * INSPECTOR CONTROL AREA
           */

          el(InspectorControls, {},
            el(PanelBody, {
                title: 'Form Settings',
                initialOpen: true
              },

              /* Toggle Field */
              el(MyToggleControl, {}, ),

            ),

          ),

          /*
           * CONTENT AREA
           */

        );
      },


      save: function(props) {
        return el('div', {
            className: this.state.mode,
          },
       );
      }

    });

标签： javascriptreactjswordpressjsxwordpress-gutenberg