React: Toolbar报Cannot read property 'add' of undefined 求助

报错堆栈指向Toolbar.componentDidMount中的editor.add(toolbar)行，核心问题是组件从props中解构得到的editor值为undefined，不存在可调用add方法的实例对象，才会抛出Cannot read property 'add' of undefined的错误。

• 检查editor的传值时机
  多数编辑器的实例是异步初始化的，如果父组件在editor还未创建完成时就提前挂载了Toolbar组件，传给Toolbar的editor属性就会是空值。
  对应修复方式：
  1. 在父组件增加条件渲染逻辑，等editor实例完全初始化完成后再渲染Toolbar，避免空值传入；
  2. 在Toolbar的生命周期逻辑中增加判空拦截，不要无校验直接调用editor方法，修正后的componentDidMount写法：

     componentDidMount() {
       const { editor } = this.props;
       // 非空校验后再执行后续绑定逻辑
       if (!editor) return;
       const createToolbar = this.getCreateToolbar();
       const toolbar = createToolbar(this.toolbarContainer);
       editor.add(toolbar);
     }
     

• 检查props透传链路
  从editor初始化的位置到Toolbar组件的传递路径上，检查是否存在拼写错误（比如大小写不一致将editor写为Editor）、中间层组件漏传属性的问题，确认Toolbar实际接收到的editor值和预期一致。
• 完善类型校验提前发现问题
  当前代码中给editor配置的propTypes没有添加必填标识，开发环境下仅会输出警告不会中断执行，很容易忽略漏传问题。如果editor是Toolbar运行的必要属性，可以调整配置，在开发阶段就提前发现漏传问题：

  Toolbar.propTypes = {
    createToolbar: PropTypes.func,
    editor: PropTypes.object.isRequired
  };
  

补充：你在Toolbar的render方法中直接渲染的<link>标签不属于React组件的推荐写法，建议将iconfont的样式引入放到项目公共入口的HTML文件中，该写法本身不会触发当前的运行报错。

内容的提问来源于stack exchange，提问作者Bouaziz Dhia