Полученные в React данные отображаются не так, как ожидалось

У меня проблемы с отображением данных с помощью ReactJS.

Я могу получать данные из API и перебирать каждый объект, чтобы отобразить каждый «продукт». Все тринадцать (13) продуктов отображаются на моей странице, но каждый элемент отображается на отдельной странице (всего 13 страниц), а не на 1 странице (имеет ли это смысл?). Как мне сделать так, чтобы все «продукты» отображались на одной странице (в списке), а не создавать новую страницу (с верхним и нижним колонтитулами) для каждого продукта?

Я не знаю, как лучше объяснить эту проблему. Прошу прощения за постановку вопроса.

Мой код ниже:

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.info(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.info("state", this.state.products);
      });
  }

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

export default Top_Sellers;

Просто выполните сетевой запрос в componentDidMount и используйте this.setState({ products: products }), когда запрос будет выполнен. Затем вместо этого извлеките JSX из состояния в методе рендеринга.

— 03.08.2018 18:41

javascript reactjs

03.08.2018 18:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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>
    );
  }
}

Спасибо за вашу помощь! Я все еще новичок в этом ... не могли бы вы показать мне, как я бы это сделал? Каждый раз, когда я перемещаю что-либо в этом коде, оно ломается.

— 03.08.2018 19:06

@ J.Patterson Я добавил упрощенный пример, дайте мне знать, поможет ли это

— 03.08.2018 19:28

03.08.2018 18:50

Вам следует разделить свой продукт на другой компонент. Как это,

 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*/} на вашу карту. Это может улучшить реакцию.

03.08.2018 19:32