React: данные пользовательского интерфейса не обновляются в ReactJS

Question

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

Спасибо

Код

<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

Я немного озадачен вопросом, но это может быть проблемой setState.Состояние обычно находится на один шаг позади рендера, если вы не сделаете обратный вызов после setState, то есть в разделе, где вы пишете:

this.setState({
    data: nextProps.parties,
    renderData:nextProps.parties
  });

try

this.setState({
    data: nextProps.parties,
    renderData:nextProps.parties
  }, () => {});

Answer 2

В первую очередь вам нужно удалить componentWillUpdate, так как это было объявлено небезопасным.Однако вы можете попробовать componentDidUpdate.Это должно решить эту проблему.Вы также можете использовать хук useEffect, который в основном действует как componentDidMount и componentDidUpdate.

componentDidUpdate(prevProps) {
console.log(prevProps, this.props)
  // Typical usage (don't forget to compare props):
  if (this.props.parties !== prevProps.parties) {
    this.setState({
    data: props.parties,
    renderData:props.parties
  });
  }

}