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。

基本上我必须在babel config中的presets数组中添加es2015。

干杯。

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

1 个答案: