Question

我一直在研究这个话题并且完全陷入困境。我正在使用React.js，并使用es6类组件。

当我在this.showDate函数内部调用filterCourses时，它声称无法读取showDate的{{1}}属性。这意味着关键字undefined为this。

我尝试在构造函数中绑定undefined。

问题

如何定义this？

this

Answer 1

正如Emil H在上面的评论中所提到的，问题是一旦你进入this函数，map就没有约束。您可以将thisArg传递给map函数，也可以将该函数移动到您在构造函数中绑定的单独的类函数中。这看起来像这样（未经测试）：

class Upcoming_Training extends Component {
  constructor(props) {
    super(props);
    this.filterCourses = this.filterCourses.bind(this);
    this.renderCourseRow = this.renderCourseRow.bind(this);
  }

  showDate(date) {
    // Format date...
  }

  renderCourseRow(course, index) {
    return (
      <tr key={index}>
        <th><button className='btn btn-sm btn-primary'> More Info </button></th>
        <td>{course.Course}</td>
        <td>{(course.Name.includes("OL -") ? course.Name.slice(5) : course.Name)}</td>
        <td>{this.showDate(course.Start)}</td>
        <td>{this.showDate(course.End)}</td>
        <td>{(course.IsOnline ? "Online" : "On-Site")}</td>
      </tr>
    )
  }

  filterCourses() {
    if (this.props.upcoming_training != []) {
      return this.props.upcoming_training.map(renderCourseRow);
    }
    return [];
  }

  // ...Rest of component
}

Answer 2

首先在this.state声明中删除inputValue: '',之后的逗号。同样在您的filterCourses函数中，if(this.showDate)条件正在查找showDate属性而不是函数。你的函数showDate也需要一个日期。

您还需要一个渲染功能，因为任何反应组件都需要一个。

使用this.function（React.js）无法读取undefined的属性'function'

2 个答案: