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

我正在尝试使用

react router

创建一个类似

链接的表行函数

我不断收到错误
无法读取未定义的属性“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>
       )
   });
...

handleClick（用户）{
this.router.transitiono（'index'，user）；
}
render（）{
var userNodes=this.props.posts.map（函数（user，i）{
返回(
this.handleClick（用户）}>
{user.postId}
{user.title}
{user.body}
)
});
...
使用箭头函数作为
映射
回调来保留组件上下文（否则
回调中的此
将不会指向组件实例）：

render（）{
var userNodes=this.props.posts.map（（用户，i）=>{
返回(
this.handleClick（用户）}>
{user.postId}
{user.title}
{user.body}
)
});
您必须绑定它

var userNodes = this.props.posts.map(function(user, i){}.bind(this));

这是一个
绑定
问题，您需要
绑定
上下文，否则
此
将不会指向react组件。使用
.bind（this）
和
函数
或使用
箭头函数
来避免此类问题。使用以下命令：

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>
       )
   }.bind(this));

render（）{
var userNodes=this.props.posts.map（函数（user，i）{
返回(
this.handleClick（用户）}>
{user.postId}
{user.title}
{user.body}
)
}.约束（这个）；

或者这个：

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

render（）{
var userNodes=this.props.posts.map（（用户，i）=>{
返回(
this.handleClick（用户）}>
{user.postId}
{user.title}
{user.body}
)
});

检查工作示例：


类应用程序扩展了React.Component{
handleClick（用户）{
console.log（用户）；
}
render（）{
变量数据=[0,1,2,3,4]。映射（（用户，i）=>{
返回(
this.handleClick（用户）}>
{user}
{user}
{user}
)
});
返回(
A.
B
C
{data}
)
}
}
ReactDOM.render（，document.getElementById（'app'））


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