Tengo una ruta que toma una identificación y representa el mismo componente para cada identificación, por ejemplo: <Route path='/:code' component={Card}/>

Ahora, en la etiqueta Enlace, paso una identificación al componente. Ahora, el componente Tarjeta obtiene detalles adicionales en función de la identificación pasada. Pero el problema es que solo se muestra para una identificación y no se actualiza si hago clic de nuevo y voy a la siguiente identificación. Busqué y descubrí que componentsWillReceiveProps se puede usar, pero durante las versiones recientes de React ha quedado en desuso. Entonces, ¿cómo hacer esto?

3
Ayan Banerjee 10 sep. 2018 a las 09:41

4 respuestas

La mejor respuesta

En React Router v4, agregar una etiqueta Switch después de que Router soluciona el problema

0
Ayan Banerjee 24 ene. 2019 a las 08:00

Acabo de encontrarme con un problema similar. Creo que estás combinando actualización / reenvío y remontaje. Este diagrama sobre los métodos de reacción del ciclo de vida me ayudó cuando lo estaba tratando. .

Si tu problema es como el mío, tienes un componente como

class Card extend Component {
  componentDidMount() {
    // call fetch function which probably updates your redux store  
  }

  render () {
    return // JSX or child component with {...this.props} used, 
           // some of which are taken from the store through mapStateToProps
  }
}

La primera vez que golpeas una url que monta este componente, todo funciona bien y luego, cuando visitas otra ruta que usa el mismo componente, nada cambia. Esto se debe a que el componente no se está volviendo a montar, solo se está actualizando porque algunos accesorios han cambiado, al menos this.props.match.params está cambiando.

Pero componentDidMount() no se llama cuando el componente se actualiza (vea el enlace de arriba). Por lo tanto, no obtendrá los nuevos datos y actualizará su tienda redux. Debe agregar una función componentDidUpdate(). De esa manera, puede volver a llamar a sus funciones de recuperación cuando cambian los accesorios, no solo cuando el componente está montado originalmente.

componentDidUpdate(prevProps) {
  if (this.match.params.id !== prevProps.match.params.id) {
    // call the fetch function again
  }
}

Consulte la documentación para obtener más detalles.

4
c6754 2 dic. 2018 a las 19:12

Haga algo como lo siguiente:

static getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.match.params.id !== prevState.match.params.id) {
    // Here
  }
}
0
Omid Nikrah 10 sep. 2018 a las 07:12

De hecho, descubrí otra forma de hacer esto.

Comenzaremos con su código de ejemplo: <Route path='/:code' component={Card}/>

Lo que desea hacer es que <Card> sea un componente envoltorio, funcionalmente preferible (en realidad no necesitará ningún estado que no creo) y renderice el componente que desea renderizar pasando sus accesorios con {...props}, para que obtenga las propiedades del enrutador, pero lo más importante es darle un accesorio key que lo obligará a volver a renderizar desde cero

Entonces, por ejemplo, tengo algo que se ve así:

<Route exact={false} path="/:customerid/:courierid/:serviceid" component={Prices} />

Y quería que mi componente se volviera a procesar cuando cambia la URL, pero SOLO cuando cambia el ID de cliente o el ID de servicio. Así que hice Prices en un componente funcional como este:

function Prices (props) {
    const matchParams = props.match.params;
    const k = `${matchParams.customerid}-${matchParams.serviceid}`;
    console.log('render key (functional):');
    console.log(k);
    return (
        <RealPrices {...props} key={k} />
    )
}

Tenga en cuenta que mi clave solo tiene en cuenta customerid y serviceid: se volverá a procesar cuando cambien esos dos, pero no se volverá a procesar cuando cambien courierid (solo agregue eso a la clave si lo desea). Y mi componente RealPrices obtiene el beneficio de seguir teniendo todos los accesorios de ruta transmitidos, como historial, ubicación, coincidencia, etc.

0
TKoL 15 oct. 2019 a las 16:05