O React não recarrega os dados do componente na alteração do parâmetro de rota ou na alteração da consulta

Eu tenho um componente “home” com links e, quando você clica em um link, o componente do produto é carregado com o produto. Eu também tenho outro componente que está sempre visível, mostrando links para os “produtos visitados recentemente”.

Esses links não funcionam quando estão em uma página do produto. A URL é atualizada quando clico no link e ocorre uma renderização, mas o componente do produto não é atualizado com o novo produto.

Veja este exemplo: exemplo Codesandbox

Aqui estão as rotas em index.js:

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

Os links no ProductHistory são assim:

  {product.name} 

Então, eles correspondem ao Route path="/products/:product" da Route path="/products/:product" .

Quando estou em uma página do produto e tento seguir um link ProductHistory, as atualizações de URL e uma renderização ocorrem, mas os dados do componente não são alterados. No exemplo da Codesandbox, você pode remover o comentário do alerta na function de renderização dos componentes do Produto para ver se ele é processado quando você segue o link, mas nada acontece.

Eu não sei qual é o problema … Você pode explicar o problema e encontrar uma solução? Isso seria bom!

Juntamente com componentDidMount , você também precisa implementar a function componentWillReceiveProps na página Products , pois o mesmo componente é re-rendered com params atualizados e not re-mounted quando você altera os parâmetros da rota, isso porque os parâmetros são passados ​​como props para o componente e em props change, reagem componentes re-renderizados e não re-montados.

 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 }) } } 

Códigos de trabalho

Com a versão mais recente do React (v16.3.0 em diante), você pode usar getDerivedStateFromProps para definir / atualizar o estado com base em adereços (não é necessário especificá-lo em dois methods de ciclo de vida diferentes)

 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; } 

Como o componente Produto já está carregado, ele não será recarregado. Você precisa lidar com o novo ID do produto no método abaixo de componente

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