Volver a renderizar el componente React cuando cambie la propiedad

Solución:

Tienes que agregar una condición en tu componentDidUpdate método.

El ejemplo está usando fast-deep-equal para comparar los objetos.

import equal from 'fast-deep-equal'

...

constructor(){
  this.updateUser = this.updateUser.bind(this);
}  

componentDidMount() {
  this.updateUser();
}

componentDidUpdate(prevProps) {
  if(!equal(this.props.user, prevProps.user)) // Check if it's a new user, you can also use some unique property, like the ID  (this.props.user.id !== prevProps.user.id)
  {
    this.updateUser();
  }
} 

updateUser() {
  if (this.props.isManager) {
    this.props.dispatch(actions.fetchAllSites())
  } else {
    const currentUserId = this.props.user.get('id')
    this.props.dispatch(actions.fetchUsersSites(currentUserId))
  }  
}

Usando Hooks (React 16.8.0+)

import React, { useEffect } from 'react';

const SitesTableContainer = ({
  user,
  isManager,
  dispatch,
  sites,
}) => {
  useEffect(() => {
    if(isManager) {
      dispatch(actions.fetchAllSites())
    } else {
      const currentUserId = user.get('id')
      dispatch(actions.fetchUsersSites(currentUserId))
    }
  }, [user]); 

  return (
    return <SitesTable sites={sites}/>
  )

}

Si el accesorio que está comparando es un objeto o una matriz, debe usar useDeepCompareEffect en lugar de useEffect.

ComponentWillReceiveProps() va a quedar obsoleto en el futuro debido a errores e inconsistencias. Una solución alternativa para volver a renderizar un componente en el cambio de accesorios es usar ComponentDidUpdate() y ShouldComponentUpdate().

ComponentDidUpdate() se llama siempre que el componente se actualiza Y si ShouldComponentUpdate() devuelve verdadero (si ShouldComponentUpdate() no esta definido regresa true por defecto).

shouldComponentUpdate(nextProps){
    return nextProps.changedProp !== this.state.changedProp;
}

componentDidUpdate(props){
    // Desired operations: ex setting state
}

Este mismo comportamiento se puede lograr utilizando solo el ComponentDidUpdate() método incluyendo la declaración condicional dentro de él.

componentDidUpdate(prevProps){
    if(prevProps.changedProp !== this.props.changedProp){
        this.setState({          
            changedProp: this.props.changedProp
        });
    }
}

Si uno intenta establecer el estado sin un condicional o sin definir ShouldComponentUpdate() el componente se volverá a renderizar infinitamente

Podrías usar KEY clave única (combinación de los datos) que cambia con los accesorios, y ese componente se volverá a generar con los accesorios actualizados.

---

---

Utiliza Nuestro Buscador