未捕获的TypeError:_this3.chooseTopic不是函数ReactJS

Question

我正在使用react获得一个问题,我试图点击一个列表项并为类调用一个方法,selectTopic,但我得到了返回"Uncaught 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不是函数ReactJS

有任何想法吗？

Answer 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封闭范围 - 组件.