Cannot read property 'handleClick' of undefined when using map

问题:

I am trying to make a table row function like a Link with react-router.

I keep getting the error Cannot read property 'handleClick' of undefined

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

回答1:

Use arrow function as map callback to preserve component context (otherwise this inside the callback will not point to the component instance):

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

回答2:

You have to bind it.

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

回答3:

Its a binding issue, you need to bind the context otherwise this will not point to the react component. Either use .bind(this) with function or use arrow function to avoid this kind of problem. Use 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)); 

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

Check the working example:

class App extends React.Component{    handleClick(user){     console.log(user);   }    render(){    var data = [0,1,2,3,4].map((user, i) => {        return (          <tr onClick={() => this.handleClick(user)}>            <td>{user}</td>            <td>{user}</td>            <td>{user}</td>             </tr>        )    });        return(       <table>          <thead>             <th>A</th>             <th>B</th>             <th>C</th>          </thead>          <tbody>             {data}          </tbody>       </table>    )   } }  ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <div id='app'/>

文章来源: Cannot read property 'handleClick' of undefined when using map