reactjs - 使用 map 时无法读取未定义的属性 'handleClick'

Question

我正在尝试使用 react-router 使表行功能类似于 Link 。

我不断收到错误无法读取未定义的属性“handleClick”

handleClick(user) {
   this.router.transitionTo('index', user);
}

render(){
   var userNodes = this.props.posts.map(function(user, i){
       return (
         <tr onClick={() => this.handleClick(user)}>
           <Td>{user.postId}</Td>
           <Td>{user.title}</Td>
           <Td>{user.body}</Td>   
         </tr>
       )
   });
...

Answer 1

使用箭头函数作为 map 回调来保留组件上下文(否则回调中的 this 将不会指向组件实例):

render(){
   var userNodes = this.props.posts.map((user, i) => {
       return (
         <tr onClick={() => this.handleClick(user)}>
           <Td>{user.postId}</Td>
           <Td>{user.title}</Td>
           <Td>{user.body}</Td>   
         </tr>
       )
   });