未捕获的类型错误：_this3.chooseTopic 不是 ReactJS 函数答案

【问题标题】：Uncaught TypeError: _this3.chooseTopic is not a function ReactJS未捕获的类型错误：_this3.chooseTopic 不是 ReactJS 函数
【发布时间】：2018-01-02 09:57:35
【问题描述】：

我在使用 react 时遇到问题，我试图单击列表项并为该类调用方法 chooseTopic，但我得到返回“未捕获的 TypeError：_this3.chooseTopic 不是函数 ReactJS "

这大概是我的课：

class Topicselect extends Component {
    constructor(props){
        super(props);
        this.state = {
            topics: ['math','english','science']
        }
    }
    chooseTopic(){
        console.log('has been clicked')
    }
    render(){
        const topics = this.state.topics.map(function(topic, i){
            return(<li key={i} onClick={() => this.chooseTopic()}>{topic}
            </li>)
        })
        return(
            <div className="topicselect">   
                <ul>
                  <p onClick={()=> this.chooseTopic()}>hello world</p>
                 {topics}
               </ul>
            </div>  
        )
    }
}

export default Topicselect;

当我单击 hello world 段落时，它会调用该函数，但是当我单击列表项时，它会给出错误，Uncaught TypeError: _this3.chooseTopic is not a function ReactJS

有什么想法吗？

【问题讨论】：

标签： reactjs

【解决方案1】：

那是因为您正在为您的Array#map 回调使用一个函数。使用箭头函数：

const topics = this.state.topics.map((topic,  i) => {
  return (
    <li key={i} onClick={() => this.chooseTopic()}>
      {topic}
    </li>
  )
})

原因是，在函数表达式中，this 不会引用您的组件，这取决于它的调用方式。由于this 不是指组件，因此找不到chooseTopic 作为方法，因此会出现错误。箭头函数不绑定this，因此引用封闭范围的this——组件。

【讨论】：

这节省了我的时间。

【解决方案2】：

你需要绑定this

``` 构造函数（道具）{ // 其他的东西

// 这个绑定是使this 在回调中工作所必需的 this.chooseTopic = this.chooseTopic.bind(this); } ```

在 JSX 回调中你必须小心 this 的含义。在 JavaScript 中，默认情况下不绑定类方法。如果忘记绑定 this.handleClick 并传递给 onClick，那么在实际调用函数时 this 将是未定义的。

这不是 React 特有的行为；它是 JavaScript 中函数工作方式的一部分。一般情况下，如果引用的方法后面不带()，比如onClick={this.handleClick}，就应该绑定那个方法。

如果调用 bind 让您烦恼，有两种方法可以解决这个问题。如果您使用的是实验性的属性初始化器语法，您可以使用属性初始化器来正确绑定回调：

https://facebook.github.io/react/docs/handling-events.html

【讨论】：

【解决方案3】：

this 对象没有引用。在 React 中，回调函数或事件处理程序不知道它是 react Component 类的一部分。

this 对象可以绑定或引用回调（事件处理程序）时使用的箭头函数语法。

此概念在React: this is null in event handler 中提出。

不确定此代码是否适用于您的情况。出于演示目的：

return(<li key={i} onClick={ this.chooseTopic.bind(this) }>{topic}

或

return(<li key={i} onClick={(e) => this.chooseTopic(e)}>{topic}

您可能需要修改事件处理程序的签名以接受事件对象：

chooseTopic(e){
...

【讨论】：