рендеринг реагирует компонент, когда изменения проп

Question

как заставить рендеринг нашего компонента при смене реквизита?Как заставить рендеринг родительского компонента при изменении реквизита дочернего компонента?

Я много искал, но все решения устарели в новой версии React.

в любых моих страницах (Точный путь маршрута = "/ post /: id" component = {post}), например (siteUrl / post / 1) я получаю (: id) из реквизита (this.props.match.params), и это работает.

, но когда я нахожусь в одностраничном компоненте (Post) и этом маршруте (siteUrl / post / 1), когда я передаю новые реквизиты этому компоненту (: id).

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

Answer 1

Важно то, что вы инициализируете someVal дочернего элемента сначала в конструкторе

 public static getDerivedStateFromProps(
        nextProps,
        nextState
      ) {
        let { someVal } = nextProps;
        if (nextState.someVal !== someVal) {
          return {
            initialVal,
            someVal: someVal
          };
        }
        return null;
      }

После того, как он будет повторен при изменениях реквизита, потому что состояние меняется

Answer 2

Возможно, вы используете метод componentDidMount.

componentDidMount () вызывается сразу после монтирования компонента (вставки в дерево).Инициализация, которая требует DOM-узлов, должна быть здесь.Если вам нужно загрузить данные из удаленной конечной точки, это хорошее место для создания экземпляра сетевого запроса.

, но вам нужно использовать componentDidUpdate.

componentDidUpdate ()вызывается сразу после обновления.Этот метод не вызывается для начального рендеринга.

Вы также можете использовать состояние и другие функции React без написания класса.читать больше: https://reactjs.org/docs/hooks-effect.html

Answer 3

Для повторного рендеринга как родительского, так и дочернего элементов необходимо указать путь между родителем и его дочерним элементом.

   // parent using
   <Parent someProp={{someVal}} />

   // parent render:

   render() {
      const { someProp } = this.props
      <Child someProp={{someProp}} />
   }

это, безусловно, переопределяет оба компонента, если вы не указали другую логику в componentShouldUpdate

в вашем случае Router выглядит как родитель для Parent, поэтому вы должны использовать только путь :id в качестве опоры.

Убедитесь, что Router находится на верхнем уровне, вернопод App