Question

我需要显示所选的产品详细信息，我使用的是React和Redux：选择一个产品后，应在我的ProductDetails页面中显示所选产品的详细信息。我应该如何正确地制作并显示产品详细信息

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { asyncConnect } from 'redux-connect';
import { connect } from 'react-redux';
import * as productActions from 'redux/modules/products';

@asyncConnect([{
  promise: ({ store: { dispatch, getState }, params }) => {
    dispatch(productActions.load({ id: params.prodId }, getState()));
  }
}])
@connect(
  state => ({
    products: state.products.items
  }),
  {
    ...productActions
  }
)
export default class ProductDetails extends Component {
  static propTypes = {
    products: PropTypes.array.isRequired
  };

  static defaultProps = {
    products: []
  };

  state = {
    products: []
  }

  render() {
    const { products } = this.props;
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-12">
            <h1>Product details</h1>
            <div className="col-xs-12">
              <div className="row">
                <div className="col-xs-4">
                  <div className="panel panel-default">
                      <div className="panel-body">
                        <p>{products.name}</p>// show selected product name
                        <p>{products.description}<p> // show selected product description
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

我设法解决了这个问题，很容易：

{products[0].name}

和

{products[0].description}

React js，如何通过id获取所选的产品名称

1 个答案: