ES6 React中的Wierd类属性行为。道具不会更新

Question

我有一个关于类属性的奇怪行为和什么似乎是this绑定。似乎在第二次呈现this.props不会更新类属性。所以onNextPage={this.myHandler}将有分别可在第一个渲染道具，这是我目前的类

class UserTable extends Component { 
    componentDidMount() { 
    this.props.onLoad(); 
} 

    handleNextPage =() => { 
     const { currentPage, totalPages, onPageChange } = this.props; 
     console.log('This props', this.props); 
     const nextPage = currentPage + 1; 
     ((nextPage <= totalPages) ? onPageChange : always(undefined))(nextPage); 
    } 
    /** 
    * Will handle sorting 
    * @param {*String} column column to sort 
    */ 
    handleOnSort = (column) => { 
     const { sort, onSort } = this.props; 
     onSort(column !== sort || startsWithMinus(sort) ? column : `-${column}`); 
    } 

    /** 
    * Will call next page if next page is available 
    */ 

    /** 
    * will call previous page if page is available 
    */ 
    handlePreviousPage =() => { 
     const { currentPage, onPageChange } = this.props; 
     const previousPage = currentPage - 1; 
     ((previousPage >= 1) ? onPageChange : always(undefined))(previousPage); 
    } 

    /** 
    * Will render UserTable 
    */ 
    render() { 
     const { users, currentPage, totalPages, working, sort } = this.props; 
     console.log('props are ', this.props); 
     const isSortingByKey = curry(soringType)(sort); 
     return (
      <Flex column> 
       <Table 
        currentPage={currentPage} 
        amountOfPages={totalPages} 
        onNextPage={this.handleNextPage} 
        onPreviousPage={this.handlePreviousPage} 
        columns={[ 
         { 
          caption: 'Last Name', 
          handler:() => this.handleOnSort('last_name'), 
          sort: isSortingByKey('last_name') 
         }, 
         { 
          caption: 'First Name', 
          handler:() => this.handleOnSort('first_name'), 
          sort: isSortingByKey('first_name') 
         }, 
         { 
          caption: 'Email', 
          handler:() => this.handleOnSort(User.EMAIL), 
          sort: isSortingByKey(User.EMAIL) 
         }, 
         { 
          caption: 'Phone', 
          handler:() => this.handleOnSort('phone_number'), 
          sort: isSortingByKey('phone_number') 
         }, 
         { 
          caption: 'Role', 
          handler:() => this.handleOnSort(User.ROLE), 
          sort: isSortingByKey(User.ROLE) 
         }, 
         { 
          caption: 'Competition', 
          handler:() => this.handleOnSort(User.COMPETITION), 
          sort: isSortingByKey(User.COMPETITION) 
         }, 
         { 
          caption: 'Last Login', 
          handler:() => this.handleOnSort('last_login'), 
          sort: isSortingByKey('last_login') 
         }, 
         { 
          caption: 'Status', 
          handler:() => this.handleOnSort(User.STATUS), 
          sort: isSortingByKey(User.STATUS) 
         } 
        ]} 
       > 
        {users.map(user => (
         <TableRow key={user.get(User.ID)}> 
          <Link className={styles['link-to-profile']} to={`/view-user/${user.get(User.ID)}`}>{user.get(User.LAST_NAME)}</Link> 
          {user.get(User.FIRST_NAME)} 
          {user.get(User.EMAIL)} 
          {user.get(User.PHONE_NUMBER)} 
          {user.get(User.ROLE)} 
          {user.get(User.COMPETITION)} 
          {user.get(User.LAST_LOGIN)} 
          {user.get(User.STATUS)} 
         </TableRow> 
        ))} 
       </Table> 
       <Loading block={working} /> 
      </Flex> 

     ); 
    } 

} 

所以说，改变处理程序是一个类的方法意味着

handleNextPage(){ 
    console.log('are this my props',this.props); 
} 

，并在onClick={()=>this.handleNextPage()}，将工作，但使用Class属性似乎会得到一个过时的道具。

任何想法？

Answer 1

好吧，经过很长时间的挣扎后，我找到了问题的答案。如果有其他人在Class Properties中与过时的道具挣扎。这是答案https://github.com/gaearon/react-hot-loader/issues/435。

基本上我不得不添加es2015在巴贝尔配置预设数组。

干杯。