React router4: обновить состояние в компоненте onClick Link - PullRequest
Новая
       6

React router4: обновить состояние в компоненте onClick Link

0 голосов
/ 13 февраля 2019

У меня есть компонент Route, который будет отображать строку таблицы на основе текущего URL-адреса, проблема в том, что я не могу обновить состояние с помощью onClick, который я поместил в компонент Link, 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>

Вопрос в том, как я могу обновить состояние с новым?кажется, что состояние не обновляется, я делаю это неправильно?и я немного запутался с этим решением, которое я нашел ранее, вот ссылка: Реакция на изменение URL внутри компонента с React Router 4?

1 Ответ

0 голосов
/ 13 февраля 2019

Я не usre, если это хорошая практика.Но более простым решением было бы добавить событие click к кнопке, затем onClick, выполнить setState, при обратном вызове 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>
...