0

Помогите пожалуйста, очень туплю. Что бы я не пытался сделать, у меня либо "дудос атака сервера" в виде постоянных запросов, либо же отставание на один клик загрузки данных.

В общем есть у меня список товаров. Если меняется параметр url (categoryId), то должен происходить запрос на сервер с этим параметром и обновляться список товаров в стейте.

В моем коде сейчас происходит такая ситуация: когда меняется url и currCategoryId !== prevCategoryId, происходит запрос на сервер, товары с сервера приходят и записываются в стейт, после чего идет повторный вызов componentDidUpdate, т. к. был изменен стейт (или я ошибаюсь?), при повторном вызове currCategoryId и prevCategoryId все еще не равны и поэтому все это зацикливается

ВАЖНО: по определенным причинам я не могу использовать хуки, все должно быть написано на классовых компoнентах.

import { Component } from 'react'
import apolloClient from '../../core/ApolloClient'
import { GET_PRODUCTS } from '../../core/graphql/query/getProducts'
import ProductItem from '../productItem/ProductItem'
import { withRouter } from 'react-router-dom'
import './productList.scss'

class ProductList extends Component {
  state = {
    products: [],
    categoryName: ''
  }

  componentDidMount() {
    const currCategoryId = this.props.match.params.categoryId;
    this.getProducts(currCategoryId)
  }

  componentDidUpdate(prevProps) {
    const prevCategoryId = prevProps.match.params.categoryId;
    const currCategoryId = this.props.match.params.categoryId;

    if (prevProps.match.params !== currCategoryId) {
      this.getProducts(currCategoryId) 
    }
  }

  getProducts(categoryId) {
    apolloClient
      .query({ query: GET_PRODUCTS, variables: {input: {title: categoryId}}})
      .then(({ data }) => {
        const { name, products } = data.category
        console.log(data.category)
        this.setState({
          categoryName: name,
          products: products,
        })
      })
  }

  render() {
    const { categoryName, products } = this.state
    return (
      <section className="products">
        <div className="container products__container">
          <h3 className="products__title">{categoryName}</h3>
          <ul className="products__list">
            {products.map((item) => {
              return <ProductItem key={item.id} product={item} />
            })}
          </ul>
        </div>
      </section>
    )
  }
}

export default withRouter(ProductList)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

1 ответ 1

0

ошибка в том, что я не тот аргумент проверяют в if

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.