Отфильтруйте избыточное состояние на основе определенного URL, чтобы отобразить один продукт и его варианты - PullRequest
Новая
       5

Отфильтруйте избыточное состояние на основе определенного URL, чтобы отобразить один продукт и его варианты

0 голосов
/ 13 ноября 2018

В настоящее время я настраиваю сайт реагирования на электронную коммерцию на основе drupal.Я уже настроил его для выполнения вызовов API и сохранения данных в моем приложении реакции.Когда я консоль журнала, я получаю мои текущие 3 продукта, и я получаю еще один массив всех вариантов продукта.Это все в состоянии.

Кроме того, у меня есть страница, которая отображает информацию о продукте.Он показывает описание, параметры цвета, параметры размера и т. Д. Сейчас у меня есть его настройка, при котором, когда я нажимаю на ссылку из селектора продуктов в моем приложении, он переходит на страницу продукта с URL-адресом, содержащим название продукта, по которому я щелкнул.и отображает правильное описание продукта.Тем не менее, мне нужно отфильтровать его, чтобы в состояние избыточности входил только этот продукт и его соответствующие варианты.Надеюсь, это имеет смысл ...

Не уверен, что вы, ребята, должны видеть в приложении, чтобы понять мою проблему, поэтому, пожалуйста, дайте мне знать, и я добавлю их, чтобы уточнить.Спасибо!

1 Ответ

0 голосов
/ 13 ноября 2018

Поскольку вы не предоставили какую-либо часть своего кода, я предполагаю, что часть из этого. Надеюсь, это поможет: 

class ProductPage extends Component {
  constructor(props) {
    super(props);
    this.state = { productDetails: {}, relatedProducts: [] };
  }

  componentDidMount() {
    // considering your product URL looks like domain.com/product/product-name
    const productName = window.location.pathname.split('/')[2];
    const productDetails = this.props.productList.find(product => product.name === productName);
    const relatedProducts = this.props.productList.filter(product => // determine how a product can be considered as related to the current product);
    this.setState({ productDetails, relatedProducts });
  }

  render() {
    // render codes...
  }
}

export default connect(
  state => ({
    productList: state.products // or whatever the name of your reducer for your product list in redux store
  })
)(ProductPage);
...