反应 - 激活函数 onClick 会抛出'Cannot read property'错误

Question

我有一个反应函数，在渲染方法中，我正在尝试使用一种方法运行'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

有人知道我在做什么错吗？我非常接近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关键字时，请参考该功能所属的对象。不适合您的反应组件。

Answer 2

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绑定到此功能。）

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

Answer 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));