单击 Link 组件后 componentWillReceiveProps 未收到道具

Question

我们正在创建我们的第一个 React 应用程序，以使用 Shopify Buy SDK 创建电子商务网站。

现在，如果用户直接转到如下路径，ProductDetail 组件将呈现正确的数据：/product/SOMEPRODUCT_ID

但是，当用户单击 ProductCard 组件时，所单击产品的数据不会呈现在 ProductDetail 组件中。

为了确定与 ProductDetail 组件关联的正确数据，我们创建了 getCurrentProduct 方法，该方法在 componentWillReceiveProps 生命周期挂钩期间调用。 ProductCard 和 ProductDetail 组件都可以访问 this.props.products，它是所有产品的数组。

当用户点击 ProductCard 组件中的 link 时，是否有任何生命周期挂钩允许我们从 this.props 获取产品？

下面是 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 在挂载组件接收新 props 之前被调用。所以，这个方法不会在组件挂载时被调用。这里需要在componentWillMount()生命周期方法中调用getCurrentProduct()

单击 Link 组件后 componentWillReceiveProps 未收到道具

componentWillReceiveProps not receiving props after clicking a Link component

javascript

url-routing

reactjs

react-router