Réagir ne recharge pas les données relatives aux composants sur la route param changement ou modification de la requête

J'ai une "maison" composant avec des liens, et lorsque vous cliquez sur un lien du produit composant est chargé avec le produit. J'ai aussi un autre élément qui est toujours visible, montrant les liens de la "récemment visité produits".

Ces liens ne fonctionnent pas sur une page produit. L'url des mises à jour lorsque je clique sur le lien, et un rendu se produit, mais le produit de la composante n'est pas mise à jour avec le nouveau produit.

Voir cet exemple:
Codesandbox exemple

Voici les routes index.js:

<BrowserRouter>
  <div>
    <Route
      exact
      path="/"
      render={props => <Home products={this.state.products} />}
    />

    <Route path="/products/:product" render={props => <Product {...props} />} />

    <Route path="/" render={() => <ProductHistory />} />

    <Link to="/">to Home</Link>
  </div>
</BrowserRouter>;

Les liens dans ProductHistory ressembler à ceci:

<Link to={`/products/${product.product_id}`}> {product.name}</Link>

Afin qu'elles correspondent à la Route path="/products/:product".

Quand je suis sur une page produit et essayer de suivre un ProductHistory lien, l'URL des mises à jour et un rendu se produit, mais le composant de données ne change pas. Dans le Codesandbox exemple, vous pouvez décommenter l'alerte dans les composants du Produit fonction rendu de voir qu'il s'affiche lorsque vous suivez le lien, mais rien ne se passe.

Je ne sais pas quel est le problème...Pouvez-vous expliquer le problème et trouver une solution? Ce serait formidable!

InformationsquelleAutor Galivan | 2018-01-07

25

Avec componentDidMount, Vous devez également mettre en œuvre les componentWillReceiveProps ou de l'utilisation getDerivedStateFromProps(à partir de v16.3.0 partir) en Products page depuis le même composant est re-rendered à jour params et not re-mounted lorsque vous modifiez le paramètre de route, c'est parce que les paramètres sont passés comme des accessoires de la composante et des accessoires de modification, de Réagir composants de re-rendre et de ne pas re-monté.

EDIT: de v16.3.0 utilisation getDerivedStateFromProps définition/mise à jour de l'état basée sur les accessoires(pas besoin de le spécifier dans deux différents lifecyle méthodes)
```
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;
}
```
Avant v16.3.0, vous pouvez utiliser componentWillReceiveProps
```
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

      })
    }
  }
```
Travail codesandbox
- componentWillReceiveProps est maintenant obsolète. Mais comment pouvez-vous le faire?
- Vous pouvez utiliser l'intégration des nouvelles du cycle de vie des méthodes de réagir +16.3 getDerivedStateFromProps, componentDidUpdate comme décrit dans la cette réponse.
- excellente réponse! résolu mon problème!
- J'ai essayé le getDerivedStateFromProps solution. Mais il ne fonctionne pas. Il semble que la getDerivedStateFromProps ne se déclenche une fois sur le mont.
- Pas vrai, getDerivedStateFromPRops est tiré sur initial de montage ainsi que sur toute autre mise à jour. Il y avait aussi un changement dans cette API dans 16.4. Je vais mettre à jour ma réponse à intégrer ce changement
- Cela m'a dirigé dans la bonne direction, merci pour le réponse.
InformationsquelleAutor Shubham Khatri
5

En tant que composant du Produit est déjà chargé, il ne sera pas recharger. Vous avez à gérer de nouvelles id de produit dans la méthode ci-dessous de la composante
```
componentWillReceiveProps(nextProps) {
if(nextProps.match.params.name.product == oldProductId){
  return;
}else {
 //fetchnewProduct and set state to reload
}
```
Avec la dernière version de réagir(16.3.0 partir)
```
static getDerivedStateFromProps(nextProps, prevState){
   if(nextProps.productID !== prevState.productID){
     return { productID: nextProps.productID};
  } 
  else {
     return null;
  }
}

componentDidUpdate(prevProps, prevState) {
  if(prevProps.productID !== this.state.productID){
     //fetchnewProduct and set state to reload
  }
}
```
- ComponentWillReceiveProps est également obsolète et considérés comme dangereux maintenant... est-il un autre moyen de le faire?
- il devrait être prevProps comme componentDidUpdate sera appelé après que des accessoires a changé qui sera même nextProps qui nous avait mis en getDerivedStateFromProps.
- Droit, mais je voudrais recharger lorsque le productID actuel (ce.accessoires de jeu.productID) est différent de celui de mon état, vous ne pensez pas?
- Droit qu'est ce que la condition ci-dessus n'. Le productID actuel(ce.accessoires de jeu.producID) va avoir de nouveaux porductID qui nous a été dit dans la variable d'état. Si on compare ensuite il sera toujours égale
InformationsquelleAutor Prakash S

Si vous n'êtes pas le maintien de l'état de votre composant, vous pouvez utiliser componentDidUpdate sans la nécessité pour getDerivedStateFromProps:

  componentDidUpdate(prevProps) {
    const { match: { params: { value } } } = this.props
    if (prevProps.match.params.value !== value){
      doSomething(this.props.match.params.value)
    }
  }

InformationsquelleAutor CLL

0

Bien que tous les moyens de fonctionner, je ne vois pas un point d'honneur à utiliser getDerivedStateFromProps.
Basé sur Réagir docs, "si vous voulez re-calculer certaines données uniquement lorsqu'un accessoire de modifications, utilisez un memoization helper au lieu de cela".

Ici, au lieu de cela, je suggère tout simplement à l'aide de componentDidUpdate avec la modification de la Component à PureComponenet.

Avec référence à Réagir docs, PureComponenets seulement rerender si au moins un état ou prop modifications de la valeur. Le changement est déterminée en faisant un peu de la comparaison de l'état et prop clés.

JS:
```
  componentDidUpdate = (prevProps) => {
    if(this.props.match.params.id !== prevProps.match.params.id ) {
      //fetch the new product based and set it to the state of the component
   };
  };
```
Veuillez noter que le ci-dessus ne fonctionne que si vous modifiez le Composant PureComponent, et évidemment, vous devez l'importer à partir de Réagir.

InformationsquelleAutor Amir Salar

Vous devez vous connecter pour publier un commentaire.