React - 激活函数 onClick 会引发“无法读取属性”错误 [重复]答案

【问题标题】：React - activating a function onClick throws a 'Cannot read property' error [duplicate]React - 激活函数 onClick 会引发“无法读取属性”错误 [重复]
【发布时间】：2018-05-07 04:14:06
【问题描述】：

我有一个反应函数，在渲染方法中我试图让一个方法运行“onClick”。

let categories_list=this.state.categories.results.map(function(category){
        return (
          <a onClick={() => this.getNewUrl(category_id)}>
            <li key={category.id}>
            ID: {category.id}<br/>
            Title: {category.name}<br/>
            Organisation: {category.organisation}<br/>
            </li>
        </a>
       )});

这是我要运行的功能：

getNewUrl(category_id) {
  this.setState((prevState, props) => ({
    assessments_List_url: "/api/assessments/?by-category=" + category_id + "/"
  }))
  console.log('yo ik draai')
 };

两者都在同一个组件中，为了更好地衡量，我还在组件构造函数方法中显式地绑定了函数。

this.getNewUrl = this.getNewUrl.bind(this);

然而，当我运行此代码并单击相应的标签时，我收到以下错误。

Uncaught TypeError: Cannot read property 'getNewUrl' of undefined

有人知道我做错了什么吗？我已经非常接近反应文档中的示例，所以我真的不知道我做错了什么。

【问题讨论】：

标签： reactjs

【解决方案1】：

const that = this;

let categories_list=that.state.categories.results.map((category) => {
    return (
        <a onClick={() => that.getNewUrl(category_id)}>
            <li key={category.id}>
                ID: {category.id}<br/>
                Title: {category.name}<br/>
                Organisation: {category.organisation}<br/>
            </li>
        </a>
    );
});

将 this 设为箭头函数以获取 this 的上下文。（如果您尚未将this 绑定到此函数。）

 getNewUrl = (category_id) => {
      this.setState((prevState, props) => ({
        assessments_List_url: "/api/assessments/?by-category=" + category_id + "/"
      }))
      console.log('yo ik draai')
     };

【讨论】：

如果他不使用 ES6，则将“this”传递给 map 的第二个参数

【解决方案2】：

在这里使用箭头功能：

let categories_list=this.state.categories.results.map((category) => { // <== !!!
        return (
          <a onClick={() => this.getNewUrl(category_id)}>
            <li key={category.id}>
            ID: {category.id}<br/>
            Title: {category.name}<br/>
            Organisation: {category.organisation}<br/>
            </li>
        </a>
       )});

当您使用function 语法时，this 关键字指的是函数所属的对象。不是你的反应组件。

【讨论】：

这解决了我的问题，非常感谢！

【解决方案3】：

请尝试绑定该匿名函数，可能会有所帮助

let categories_list=this.state.categories.results.map(function(category){
    return (
      <a onClick={() => this.getNewUrl(category_id)}>
        <li key={category.id}>
        ID: {category.id}<br/>
        Title: {category.name}<br/>
        Organisation: {category.organisation}<br/>
        </li>
    </a>
   )}.bind(this));

【讨论】：