React高阶组件(HOC)调用服务方法触发TypeError问题及组件命名疑问求助

1. 为什么会出现Cannot read property 'getPage' of undefined？ #

你遇到的错误核心是函数的this指向丢失了。当你把HOC里的getPage方法作为props传递给被包裹组件PageX时，这个方法的this上下文已经不再指向HOC的实例——所以执行到this.service.getPage(id)时，this是undefined，自然找不到service属性。

这里有三种常见的修复方式：

方法一：在构造函数中手动绑定this #

在HOC的构造函数里，把getPage方法的this绑定到当前HOC实例：

class HOC extends React.Component {
  constructor() {
    super();
    this.service = new ContentService();
    // 关键：绑定this到getPage方法
    this.getPage = this.getPage.bind(this);
  }
  getPage(id) {
    alert(id);
    this.service.getPage(id);
  }
  // ...render方法
}

方法二：用箭头函数定义getPage #

箭头函数会自动捕获当前上下文的this，所以不需要额外绑定：

class HOC extends React.Component {
  constructor() {
    super();
    this.service = new ContentService();
  }
  // 用箭头函数定义方法
  getPage = (id) => {
    alert(id);
    this.service.getPage(id);
  }
  // ...render方法
}

方法三：传递props时用箭头函数包裹 #

在render方法中传递getPage时，用箭头函数包裹来保留this：

render() {
  return <WrappedComponent getPage={(id) => this.getPage(id)} {...this.props} />;
}

2. 组件命名的优化：不需要额外的PageX #

你完全没必要先把组件命名为PageX再重命名为Page，直接保持原组件名为Page即可，导出时直接用HOC包裹：

import React, { Component } from "react";
import WithBackend from "./WithBackend";

class Page extends Component {
  render() {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
  }
  componentDidMount() {
    this.props.getPage("123");
  }
}

// 直接导出被HOC包裹后的组件
export default WithBackend(Page);

这样其他文件导入时，直接用import Page from './Page'就可以，完全不需要中间的PageX命名，代码更简洁易读。

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