React non ricarica i dati dei componenti sulla modifica dei parametri di rotta o sulla modifica delle query

Ho un componente “home” con collegamenti e quando si fa clic su un collegamento, il componente del prodotto viene caricato con il prodotto. Ho anche un altro componente che è sempre visibile, mostrando link ai “prodotti visitati di recente”.

Questi collegamenti non funzionano quando si trova su una pagina prodotto. L’url si aggiorna quando faccio clic sul collegamento e si verifica un rendering, ma il componente del prodotto non si aggiorna con il nuovo prodotto.

Vedi questo esempio: Esempio di codici e caselle

Ecco i percorsi in index.js:

 
} /> } /> } /> to Home
;

I collegamenti in ProductHistory hanno questo aspetto:

  {product.name} 

Quindi corrispondono al Route path="/products/:product" .

Quando sono su una pagina prodotto e provo a seguire un link ProductHistory, gli aggiornamenti URL e un rendering si verificano, ma i dati del componente non cambiano. Nell’esempio Codesandbox è ansible decommentare l’avviso nella funzione di rendering dei componenti del prodotto per vedere che esegue il rendering quando si segue il collegamento, ma non accade nulla.

Non so quale sia il problema … Puoi spiegare il problema e trovare una soluzione? Sarebbe grandioso!

Insieme a componentDidMount , devi anche implementare la funzione componentWillReceiveProps nella pagina Products poiché lo stesso componente viene re-rendered con params aggiornati e not re-mounted quando cambi i parametri del percorso, questo perché i parametri vengono passati come oggetti di scena al componente e sugli oggetti di scena, i componenti di React vengono ri-renderizzati e non rimontati.

 componentWillReceiveProps(nextProps) { if (nextProps.match.params.product !== this.props.match.params.product) { const currentProductId = nextProps.match.params.product const result = productlist.products.filter(obj => { return obj.id === currentProductId; }) this.setState({ product: result[0], currentId: currentProductId, result }) } } 

Codici di lavoro e scatola

Con l’ultima versione di React (dalla v16.3.0 in poi) è ansible utilizzare getDerivedStateFromProps per impostare / aggiornare lo stato in base agli oggetti di scena (non è necessario specificarlo in due diversi metodi Lifecycle)

 static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.match.params.product !== prevState.currentProductId){ const currentProductId = nextProps.match.params.product const result = productlist.products.filter(obj => { return obj.id === currentProductId; }) return { product: result[0], currentId: currentProductId, result } } return null; } 

Poiché il componente Prodotto è già caricato, non verrà ricaricato. Devi gestire l’ID nuovo prodotto nel metodo di componente sottostante

 componentWillReceiveProps(nextProps) { if(nextProps.match.params.name.product == oldProductId){ return; }else { //fetchnewProduct and set state to reload }