React组件renderWeather函数中this.convertDate调用时this为undefined问题

这个问题我之前在开发React组件时也碰到过，本质是类方法作为回调函数时this的指向丢失了。当你把renderWeather传给this.props.weather.map()作为回调时，它被当作普通函数调用，在React的严格模式环境下，this默认会变成undefined，自然就找不到convertDate方法了。

下面给你三种可行的解决方案，你可以根据项目情况选择：

1. 在构造函数中绑定this #

这是最传统且性能友好的方式，只在组件初始化时绑定一次this：

class WeatherList extends Component {
  constructor(props) {
    super(props);
    // 绑定renderWeather的this到组件实例
    this.renderWeather = this.renderWeather.bind(this);
    this.convertDate = this.convertDate.bind(this); // 提前绑定这个方法，避免后续潜在问题
  }

  convertDate(date) {
    return new Date(date).toLocaleTimeString(['en-US'], { hour: 'numeric', minute: 'numeric' } );
  }

  renderWeather(data) {
    const temps = data.list.map(weather => weather.main.temp);
    const labels = data.list.map(weather => this.convertDate(weather.dt_txt));
    const chartData = {
      datasets: [{ data: temps }],
      labels: labels,
    }
    return (
      <tr key={data.city.id}>
        <td> {data.city.name} </td>
        <td>
          <Line data={chartData} width="600" height="250"/>
        </td>
      </tr>
    )
  }

  render() {
    return (
      <table className='table table-hover'>
        <thead>
          <tr>
            <th> City </th>
            <th> Temperature </th>
          </tr>
        </thead>
        <tbody>
          {this.props.weather.map(this.renderWeather)}
        </tbody>
      </table>
    )
  }
}

2. 使用箭头函数包裹回调 #

在map调用时用箭头函数包裹renderWeather，利用箭头函数自动继承上层作用域this的特性：

// 修改render方法里的map调用部分
render() {
  return (
    <table className='table table-hover'>
      <thead>
        <tr>
          <th> City </th>
          <th> Temperature </th>
        </tr>
      </thead>
      <tbody>
        {/* 用箭头函数包裹，确保this指向组件实例 */}
        {this.props.weather.map(weather => this.renderWeather(weather))}
      </tbody>
    </table>
  )
}

这种写法更简洁，但要注意：每次组件渲染时都会创建一个新的箭头函数，对于性能要求极高的大型组件可能会有微小影响，不过大部分场景下完全没问题。

3. 把类方法定义为箭头函数（类字段语法） #

如果你用的Babel支持ES6+的类字段语法（需要配置@babel/plugin-proposal-class-properties），可以直接把renderWeather和convertDate定义为箭头函数，这样this会自动绑定到组件实例：

class WeatherList extends Component {
  // 用箭头函数定义类方法，this自动绑定
  convertDate = (date) => {
    return new Date(date).toLocaleTimeString(['en-US'], { hour: 'numeric', minute: 'numeric' } );
  }

  renderWeather = (data) => {
    const temps = data.list.map(weather => weather.main.temp);
    const labels = data.list.map(weather => this.convertDate(weather.dt_txt));
    const chartData = {
      datasets: [{ data: temps }],
      labels: labels,
    }
    return (
      <tr key={data.city.id}>
        <td> {data.city.name} </td>
        <td>
          <Line data={chartData} width="600" height="250"/>
        </td>
      </tr>
    )
  }

  render() {
    return (
      <table className='table table-hover'>
        <thead>
          <tr>
            <th> City </th>
            <th> Temperature </th>
          </tr>
        </thead>
        <tbody>
          {this.props.weather.map(this.renderWeather)}
        </tbody>
      </table>
    )
  }
}

这种写法最简洁，也是现在React项目中比较流行的方式，前提是你的Babel配置支持类字段语法。

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