Реакция: Как сделать рендеринг, если вызвана функция

Question

Я работаю над проектом, где я обновляю URL. На самом деле это работает нормально, когда я нажимаю на следующую кнопку, но я хочу, чтобы повторно визуализировать приложение, когда вызывается функция. Я новичок в ReactJS. Может кто-нибудь помочь мне решить эту проблему.

Извините, я не являюсь носителем языка, извините, если я допустил ошибку в английском грамматике. Спасибо

Отображение данных через этот URL-адрес Функция

urlParams() {
 return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&
filter[skip]=${this.state.skip}
&&filter[order]=${this.state.sortedData}`;
  }

Полный код компонента

<code>        class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}

Изменить ссылку ) } } ReactDOM.render (, document.querySelector ('div # my-example'))

Answer 1

Вы можете вызвать повторную визуализацию вашего компонента, позвонив по номеру:

this.forceUpdate();

Однако вы должны быть осторожны, чтобы не вводить бесконечный цикл обновления.

Обычный (рекомендуемый) способ перерисовки заключается в необходимости изменения вашего состояния с помощью setState.

EDIT

Думаю, вам нужно вызвать getData после того, как вы щелкнули заголовок таблицы:

getSortedData=()=>{
  console.log("hello clicked")
  this.setState({
    sortedData:'companyName'
  })
  // now invoke getdata which will refresh the data:
  this.getData()
}