componentWillReceiveProps在點擊鏈接組件後沒有收到道具

Question

我們正在創建我們的第一個React應用程序，以使用Shopify購買SDK創建電子商務網站。

眼下正確的數據是由產品詳情成分，如果用戶直接進入如下所示的路徑被渲染：/product/SOMEPRODUCT_ID

然而，當在ProductCard組件的用戶點擊，對於clicked-數據產品不會在ProductDetail組件中呈現。

要確定與ProductDetail組件相關的正確數據，我們創建了在componentWillReceiveProps生命週期掛鉤期間調用的getCurrentProduct方法。 ProductCard和ProductDetail組件均可訪問this.props.products，這是所有產品的陣列。

是否有任何生命週期掛鉤允許我們從this.props獲得產品，當用戶點擊ProductCard組件的鏈接時？

以下是ProductDetail組件。

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; 

以下是ProductCard組件。

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

生命週期方法componentWillReceiveProps在安裝的組件接收新的道具之前被調用。所以，這個方法在組件被掛載時不會被調用。您需要在componentWillMount()生命週期方法中致電getCurrentProduct()。