Javascript 对未按预期呈现的提取数据进行反应

我在使用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;

class Top\u组件{
建造师（道具）{
超级（道具）；
此.state={
产品：[]，
属性：{}
};
}
componentDidMount（）{
取回（“http://www.msaironline.com/qa1/api/product.php?type=top")
。然后（结果=>{
返回results.json（）；
})
。然后（数据=>{
让products=data.product.map（pic=>{
控制台日志（pic）；
设项=0；
同时（项目<图片长度）{
项目++；
}
返回(
畅销书
{pic.prodID}

{pic.brandName}
${pic.msrp}
节省：${pic.msrp-pic.prodPrice}
${pic.prodPrice}
|


&副本；2018年-MS Air，Inc.| Home

);
});
this.setState（{products:products}）；
console.log（“state”，this.state.products）；
});
}
render（）{
返回(
{this.state.products}
);
}
}
出口默认的顶级卖家；

data.product.map正在为每个产品创建一个完整的包装元素

映射产品以创建一个

元素列表，这些元素应该可以修复它

我还建议@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>
    );
  }
}

const getData=（）=>{
还愿([
{id:'1'，name:'Product 1'}，
{id:'2'，name:'Product 2'}，
{id:'3'，name:'Product 3'}
])
}
类顶级组件{
建造师（道具）{
超级（道具）；
此.state={
产品：[]
};
}
componentDidMount（）{
getData（）
。然后（数据=>{
this.setState（{products:data}）；
});
}
render（）{
返回(
畅销书
{this.state.products.map（（产品）=>(
))}
帮助和货币
关于链接
关于页脚
);
}
}

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

 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;

import React，{Component}来自'React'；
常数乘积=（pic）=>{
返回(
畅销书
{pic.prodID}

{pic.brandName}
${pic.msrp}
节省：{'}

${pic.msrp-
图}


${pic.prodPrice}

)
}
类顶级组件{
建造师（道具）{
超级（道具）；
此.state={
产品：[]，
属性：{}
};
}
componentDidMount（）{
取（'http://www.msaironline.com/qa1/api/product.php?type=top')
。然后（结果=>{
返回results.json（）；
})
。然后（数据=>{
this.setState（{products:data.product}）；
});
}
render（）{
返回(
{this.state.products.map（pic=>）}
|


&副本；2018-MS