Реагировать на рендер при смене реквизита - PullRequest
Новая
       50

Реагировать на рендер при смене реквизита

1 голос
/ 28 июня 2019

Я пытаюсь выполнить рендеринг моего компонента только при смене реквизита, к сожалению, он продолжает рендеринг, даже если реквизиты не изменены, мои коды выглядят следующим образом: 

componentDidUpdate(prevProps,prevState){

    if(prevProps.data !== this.props.data){
        this.props.getData(userID)
      }
   }


    render(){
   //console.log('render') infinite rendering even when this.props.data is unchanged 
       return(
          <Mycomponent data={this.props.data}/>
      )
  }

const mapStateToProps = (state) => ({
    data: state.api.data,

})

export default connect(mapStateToProps, mapDispatchToProps)(Component1)

Ответы [ 2 ]

2 голосов
/ 28 июня 2019

Я считаю, что использование PureComponent вместо компонента гарантирует, что компонент будет отображаться только тогда, когда он получает новую информацию. Вот как бы я это сделал: 

import React, { PureComponent } from "react";
import Mycomponent from "./Mycomponent";

export default class WrapperComponent extends PureComponent {
  componentDidUpdate(prevProps,prevState){

    if(prevProps.data !== this.props.data){
        this.props.getData(userID)
      }
   }


    render(){
       return(
          <Mycomponent data={this.props.data}/>
      )
  }
}
0 голосов
/ 28 июня 2019

Из документов ,

getDerivedStateFromProps вызывается непосредственно перед вызовом метода рендеринга как при первоначальном монтировании, так и при последующих обновлениях.Он должен возвращать объект, чтобы обновить состояние, или нуль, чтобы ничего не обновлять.

Вы должны использовать этот метод, 

static getDerivedStateFromProps(nextProps, prevState){
   if(nextProps.someValue!==prevState.someValue){
     //do something
  }
  else return null;
}
...