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

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

Answer 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绑定到此函数。）

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

Answer 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关键字指的是该函数所属的对象。不是你的反应成分。

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

React - 激活onClick函数会抛出'无法读取属性'错误

3 个答案: