0
입니다. 클래스 속성과 관련하여 이상한 행동을 보이며 무엇이 this 인 것처럼 보입니다. 두 번째 렌더링 후에 this.props가 클래스 속성에 대해 업데이트되지 않는 것 같습니다. 그래서 onNextPage={this.myHandler}은 먼저 렌더링에 사용할 수 있었던 소품을 것이 내 현재의 클래스입니다Wierd 클래스 ES6의 속성 동작 React. 소품 업데이트는
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()}에서 작동을 의미하는 클래스의 방법으로 핸들러를 변경 말한다 , 클래스 속성을 사용하면 오래된 소품을 얻는 것 같습니다.
아이디어가 있으십니까?
'props.onLoad() 란 무엇입니까? 기본적으로 당신은 constructor 안쪽에 이것을 호출해서는 안됩니다 ... – Dekel
그것은 componenDidMount()에있었습니다. 저는 문제를 파악하려고했습니다. 그래서 사람들을 혼동하지 않도록 원본을 넣을 것입니다. 시간 내 주셔서 감사합니다 – jstuartmilne
[클릭 핸들러를 클릭하고 바인딩하는] 가능한 복제본 (https://stackoverflow.com/questions/26346263/react-click-handlers-and-binding-this) – lilezek