React router4:更新 onClick Link 组件的状态
React router4: update state at onClick Link component
我有一个 Route 组件,它将根据当前的 url 呈现一行 table,问题是我无法使用放在 [=17= 上的 onClick 更新状态] 组件, url 改变了,但是状态还是一样的,所以渲染的行内容还是一样的,看下面这段代码:
<Route
exact
path={'/dashboard/:page'}
render={() => (
this.state.data &&
data.map((data, index) =>
<Row key={index}>
<Col md="1" xl="1">{index + 1}</Col>
<Col md="3" xl="4">{data.job_title}</Col>
<Col md="2" xl="3">{data.city}</Col>
<Col md="2" xl="2">{data.job_status}</Col>
<Col md="2" xl="2"><a href="">{data.inbox.length > 1 ? data.inbox + ' Candidates' : data.inbox + ' Candidate'}</a></Col>
</Row>
)
)}
/>
<Route
exact
path={'/dashboard'}
render={() => (
this.state.data &&
data.map((data, index) =>
<Row key={index}>
<Col md="1" xl="1">{index + 1}</Col>
<Col md="3" xl="4">{data.job_title}</Col>
<Col md="2" xl="3">{data.city}</Col>
<Col md="2" xl="2">{data.job_status}</Col>
<Col md="2" xl="2"><a href="">{data.inbox.length > 1 ? data.inbox + ' Candidates' : data.inbox + ' Candidate'}</a></Col>
</Row>
)
)}
/>
</div>
<div style={{display: 'flex', justifyContent: 'center'}}>
<Link onClick={() => {this.setState({currentPage: this.state.currentPage + 1, data: dataMock.data[this.state.currentPage + 1]})}} to="/dashboard/1">
<Button style={{margin: '20px'}}>Page + 1</Button>
</Link>
<Link onClick={() => {this.setState({currentPage: this.state.currentPage - 1, data: dataMock.data[this.state.currentPage - 1]})}} to='/dashboard/2'>
<Button style={{margin: '20px'}}>Page - 1</Button>
</Link>
</div>
问题是如何用新状态更新状态?状态似乎没有更新,我做错了吗?我对之前找到的这个解决方案有点困惑,这里是 link:
我不认为这是一个好习惯。但更简单的解决方法是
给按钮添加点击事件,然后onClick,做setState,on setState的回调this.props.history.push('Route')
例如,
takeUserToPage = () => {
this.setState({currentPage: this.state.currentPage + 1, data:
dataMock.data[this.state.currentPage + 1]}, () => {
this.props.history.push('Route')
});
}
//inside your return
<Button style={{margin: '20px'}} onClick={this.takeUserToPage}>Page + 1</Button>
我有一个 Route 组件,它将根据当前的 url 呈现一行 table,问题是我无法使用放在 [=17= 上的 onClick 更新状态] 组件, url 改变了,但是状态还是一样的,所以渲染的行内容还是一样的,看下面这段代码:
<Route
exact
path={'/dashboard/:page'}
render={() => (
this.state.data &&
data.map((data, index) =>
<Row key={index}>
<Col md="1" xl="1">{index + 1}</Col>
<Col md="3" xl="4">{data.job_title}</Col>
<Col md="2" xl="3">{data.city}</Col>
<Col md="2" xl="2">{data.job_status}</Col>
<Col md="2" xl="2"><a href="">{data.inbox.length > 1 ? data.inbox + ' Candidates' : data.inbox + ' Candidate'}</a></Col>
</Row>
)
)}
/>
<Route
exact
path={'/dashboard'}
render={() => (
this.state.data &&
data.map((data, index) =>
<Row key={index}>
<Col md="1" xl="1">{index + 1}</Col>
<Col md="3" xl="4">{data.job_title}</Col>
<Col md="2" xl="3">{data.city}</Col>
<Col md="2" xl="2">{data.job_status}</Col>
<Col md="2" xl="2"><a href="">{data.inbox.length > 1 ? data.inbox + ' Candidates' : data.inbox + ' Candidate'}</a></Col>
</Row>
)
)}
/>
</div>
<div style={{display: 'flex', justifyContent: 'center'}}>
<Link onClick={() => {this.setState({currentPage: this.state.currentPage + 1, data: dataMock.data[this.state.currentPage + 1]})}} to="/dashboard/1">
<Button style={{margin: '20px'}}>Page + 1</Button>
</Link>
<Link onClick={() => {this.setState({currentPage: this.state.currentPage - 1, data: dataMock.data[this.state.currentPage - 1]})}} to='/dashboard/2'>
<Button style={{margin: '20px'}}>Page - 1</Button>
</Link>
</div>
问题是如何用新状态更新状态?状态似乎没有更新,我做错了吗?我对之前找到的这个解决方案有点困惑,这里是 link:
我不认为这是一个好习惯。但更简单的解决方法是
给按钮添加点击事件,然后onClick,做setState,on setState的回调this.props.history.push('Route')
例如,
takeUserToPage = () => {
this.setState({currentPage: this.state.currentPage + 1, data:
dataMock.data[this.state.currentPage + 1]}, () => {
this.props.history.push('Route')
});
}
//inside your return
<Button style={{margin: '20px'}} onClick={this.takeUserToPage}>Page + 1</Button>