componentWillReceiveProps empfängt keine Requisiten nach dem Klicken auf eine Link-Komponente

Question

Wir erstellen unsere erste React-App, um eine E-Commerce-Website mit dem Shopify Buy SDK zu erstellen.

Gerade jetzt die richtigen Daten werden durch die Komponente Product gemacht zu werden, wenn ein Benutzer wie folgt direkt auf einen Pfad geht: /product/SOMEPRODUCT_ID

Wenn jedoch der Benutzer klickt auf einer ProductCard Komponente, die Daten für die clicked- Produkt wird in einer ProductDetail-Komponente nicht gerendert.

Um die richtigen Daten für die ProductDetail-Komponente zu ermitteln, haben wir die getCurrentProduct-Methode erstellt, die während des Lebenszyklus-Hooks componentWillReceiveProps aufgerufen wird. Sowohl die ProductCard- als auch die ProductDetail-Komponente haben Zugriff auf this.props.products, die ein Array aller Produkte darstellt.

Gibt es einen Lebenszyklus-Hook, der es uns ermöglicht, die Produkte von this.props zu erhalten, wenn der Benutzer auf einen Link von der ProductCard-Komponente klickt?

Unten ist die ProductDetail-Komponente.

import React, { Component } from 'react'; 

class ProductDetail extends Component { 
    constructor() { 

    super(); 

    this.state = { 
     product: {} 
    }; 

    this.getCurrentProduct = this.getCurrentProduct.bind(this); 
    } 

    componentWillReceiveProps(nextProps) { 

    this.getCurrentProduct(nextProps.products); 
    } 

    getCurrentProduct(products) { 

    const slug = this.context.match.parent.params.id; 

    const product = products.filter(product => { 
     return product.handle === slug; 
    })[0]; 

    this.setState({ product }); 
    } 

    render() { 
    return (
     <main className="view view--home"> 
     {this.state.product.title} 
     </main> 
    ); 
    } 
} 

ProductDetail.contextTypes = { 
    match: React.PropTypes.object 
} 

export default ProductDetail; 

Unten ist die ProductCard-Komponente.

import React, { Component } from 'react'; 
import { Link } from 'react-router'; 

class ProductCard extends Component { 
    render() { 
    const { details } = this.props; 
    return (
     <figure className="product-card"> 
     <Link to={`/product/${this.props.id}`}> 
      <img src={details.images[0].src} alt={details.title} className="product-card__thumbnail" /> 
     </Link> 
     <Link to={`/product/${this.props.id}`}> 
      <figcaption className="product-card__body"> 
      <h3 className="product-card__title">{details.title}</h3> 
      <span className="product-card__price">{details.rendered_price}</span> 
      </figcaption> 
     </Link> 
     </figure> 
    ) 
    } 
} 

Answer 1

Der Lebenszyklus componentWillReceiveProps Verfahren aufgerufen wird, bevor ein Bauteil montiert neue Stützen aufnimmt. Diese Methode wird also nicht aufgerufen, wenn die Komponente geladen ist. Hier müssen Sie getCurrentProduct() in componentWillMount() Lifecycle-Methode aufrufen.