Question

我在使用ReactJS显示数据时遇到问题。

我能够从API提取数据，并遍历每个对象以显示每个“产品”。所有十三（13）个产品都显示在我的页面上，但是每个项目都显示在单独的页面上（总共13页）而不是显示在一页上（这有意义吗？）。如何使所有“产品”显示在一页上（列表中），而不是为每个产品创建新页面（包含页眉和页脚）？

我不确定如何更好地解释这个问题。对于这个问题，我深表歉意。

我的代码如下：

class Top_Sellers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      attributes: {}
    };
  }

  componentDidMount() {
    fetch("http://www.msaironline.com/qa1/api/product.php?type=top")
      .then(results => {
        return results.json();
      })
      .then(data => {
        let products = data.product.map(pic => {
          console.log(pic);

          let item = 0;

          while (item < pic.length) {
            item++;
          }

          return (
            <div>
              <div className="content-area-container">
                <div className="top-sellers">
                  <h1>TOP SELLERS</h1>
                </div>
                <div className="row">
                  <div className="product_listing">
                    <div className="product_entry">
                      <div className="product-image">
                        <img src={pic.icon} alt="product-placeholder" />
                      </div>

                      <p>{pic.prodID}</p>

                      <div className="product-details">
                        <h4 className="product-title">
                          <a href="/product_pages/prodID409">{pic.prodName}</a>
                        </h4>
                        <h6 className="product-brand-name">{pic.brandName}</h6>
                        <h6 className="product-suggested-retail-price">
                          ${pic.msrp}
                        </h6>
                        <h6 className="product-savings">
                          Savings: <strong>${pic.msrp - pic.prodPrice}</strong>
                        </h6>
                        <h6 className="product-actual-price">
                          <strong>${pic.prodPrice}</strong>
                        </h6>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="FooterLinks1">
                  <HelpAndCurrency />
                </div>

                <div className="FooterLinks2">
                  <AboutLinks />
                </div>
              </div>

              <div className="about-footer">
                <div className="terms">
                  <p>
                    <a href="/terms" target="_blank" rel="noopener noreferrer">
                      Terms of Use
                    </a>
                    |
                    <a
                      href="/privacy"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      Privacy Policy
                    </a>
                  </p>
                </div>

                <div className="copyright">
                  <p>
                    &copy; 2018 - MS Air, Inc. | <Link to="/">Home</Link>
                  </p>
                </div>
              </div>
            </div>
          );
        });

        this.setState({ products: products });
        console.log("state", this.state.products);
      });
  }

  render() {
    return (
      <div className="container2">
        <div className="container1">{this.state.products}</div>
      </div>
    );
  }
}

export default Top_Sellers;

Answer 1

data.product.map正在为每种产品创建整个包装元素。

在产品上映射以创建<div className="row">元素列表，并且应该对其进行修复。

我还建议@Tholle建议使用状态并在render中进行工作，而不是在componentDidMount中进行所有工作。

这是一个简化的示例，其中包含建议的更改：

const getData = () => {
  return Promise.resolve([
    { id: '1', name: 'Product 1'},
    { id: '2', name: 'Product 2'},
    { id: '3', name: 'Product 3'}
  ])
}

class Top_Sellers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: []
    };
  }

  componentDidMount() {
    getData()
      .then(data => {
        this.setState({ products: data });
      });
  }

  render() {
    return (
      <div>
        <div className="content-area-container">
          <div className="top-sellers">
            <h1>TOP SELLERS</h1>
          </div>
            {this.state.products.map((product) => (
              <div className="row" key={product.id}>
                <h4 className="product-title">
                  <a href="/product_pages/prodID409">{product.name}</a>
                </h4>
              </div>
            ))}
          <div className="FooterLinks1">
            <div>help and currency</div>
          </div>
          <div className="FooterLinks2">
            <div>about links</div>
          </div>
        </div>
        <div className="about-footer">
          about footer
        </div>
      </div>
    );
  }
}

Answer 2

您应该将产品拆分为另一个组件。像这样

 import React, { Component } from 'react';


const Product = (pic) => {
    return (
        <div>
        <div className="content-area-container">
            <div className="top-sellers">
                <h1>TOP SELLERS</h1>
            </div>
            <div className="row">
                <div className="product_listing">
                    <div className="product_entry">
                        <div className="product-image">
                            <img
                                src={pic.icon}
                                alt="product-placeholder"
                            />
                        </div>

                        <p>{pic.prodID}</p>

                        <div className="product-details">
                            <h4 className="product-title">
                                <a href="/product_pages/prodID409">
                                    {pic.prodName}
                                </a>
                            </h4>
                            <h6 className="product-brand-name">
                                {pic.brandName}
                            </h6>
                            <h6 className="product-suggested-retail-price">
                                ${pic.msrp}
                            </h6>
                            <h6 className="product-savings">
                                Savings:{' '}
                                <strong>
                                    ${pic.msrp -
                                        pic.prodPrice}
                                </strong>
                            </h6>
                            <h6 className="product-actual-price">
                                <strong>
                                    ${pic.prodPrice}
                                </strong>
                            </h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    )
}
class Top_Sellers extends Component {
    constructor(props) {
        super(props);
        this.state = {
            products: [],
            attributes: {}
        };
    }

    componentDidMount() {
        fetch('http://www.msaironline.com/qa1/api/product.php?type=top')
            .then(results => {
                return results.json();
            })
            .then(data => {
                this.setState({ products: data.product });
            });
    }

    render() {
        return (
            <div className="container2">
                <div className="container1">{this.state.products.map(pic => <Product pic={pic} key={pic.prodId}/>)}</div>
                <div className="FooterLinks1">
                    <HelpAndCurrency />
                </div>

                <div className="FooterLinks2">
                    <AboutLinks />
                </div>
                <div className="about-footer">
                    <div className="terms">
                        <p>
                            <a
                                href="/terms"
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                Terms of Use
                            </a>
                            |
                            <a
                                href="/privacy"
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                Privacy Policy
                            </a>
                        </p>
                    </div>

                    <div className="copyright">
                        <p>
                            &copy; 2018 - MS Air, Inc. |{' '}
                            <Link to="/">Home</Link>
                        </p>
                    </div>
                </div>
            </div>
        );
    }
}

export default Top_Sellers;

请记住在地图内添加key={/*someUnique stuff*/}。这样可以提高反应性能。

反应获取的数据未按预期呈现

2 个答案: