reactjs - React - 激活 onClick 函数会引发 'Cannot read property' 错误

Question

我有一个 react 函数，在渲染方法中我试图让一个方法运行“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')
 };

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

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

但是，当我运行此代码并单击相应的标签时，出现以下错误。

Uncaught TypeError: Cannot read property 'getNewUrl' of undefined

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

Answer 1

此处使用箭头函数:

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关键字指的是函数所属的对象。不适用于您的 react 组件。