Javascript 未捕获（承诺中）类型错误：无法读取属性'；模式'；未定义的

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

我创建了自己的Gutenberg块，在其中我在两个状态之间切换（这是有效的），但只要我添加

this.state.mode

对于我的

save:function（props）{}

我得到以下错误：

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

我搜索了所有我能找到的关于这个错误的信息，但是99%的答案都与函数的“绑定”有关，这是我做的。有人知道这里出了什么问题吗？ 谢谢

---

将onChange函数转换为函数调用。。。。onChange:（）=>{this.toggleoff}，与toggleonchange相同，将它们全部（也是构造函数中的一个）更改为

onChange:（）=>{this.toggleon}，

但什么也没有发生。I console.log函数，但它们不再被触发：/Change:（）=>{this.toggleoff（）}这是正确的答案，谢谢！在浏览器中重新加载后端页面后，我现在正努力保持状态。用道具而不是状态来实现这种切换是否更好？

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

    });