Помогите пожалуйста, очень туплю. Что бы я не пытался сделать, у меня либо "дудос атака сервера" в виде постоянных запросов, либо же отставание на один клик загрузки данных.
В общем есть у меня список товаров. Если меняется параметр 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>