Запрашиваю с сервера список товаров,а потом через set получаю категории товаров по их свойствам. Когда загружается страница,то все работает и ошибок никаких в консоли нет,но если подождать,то сайт начинает бесконечно посылать запросы и при этом какие-то из них failed,а какие-то pending,причем категории уже отрисованы
function CatalogeFilterButton(){
const [typeCatState,setTypeCat]=useState([])
const [stonesCatState,setStonesCat]=useState([])
const [metalCatState,setMetalCat]=useState([])
useEffect(()=>{
fetch('http://localhost:5000/api/goods_list')
.then(res=> res.json())
.then(res=>{
setMetalCat(Array.from(new Set(res.map(item=>{return item.metal_id}))))
setTypeCat(Array.from(new Set(res.map(item=>{return item.type_id}))))
setStonesCat(Array.from(new Set(res.map(item=>{return item.stones}))))
})
})
return(
<div>
<Row >
<Col xs='4' className='grey he260 paddingNone '>
<h3 className='mtl3'>Тип Изделия</h3>
<div className='filtrGrid'>
{typeCatState.map(item=><button className='filtrButton'>{item}</button>)}
</div>
</Col>
<Col xs='4' className='grey he260 paddingNone'>
<h3 className='mtl3'>Камни</h3>
<div className='filtrGrid'>
{stonesCatState.map(item=><button className='filtrButton'>{item}</button>)}
</div>
</Col>
<Col xs='4' className='grey he260 paddingNone'>
<h3 className='mtl3'>Металл</h3>
<div className='filtrGrid'>
{metalCatState.map(item=><button className='filtrButton' >{item}</button>)}
</div>
</Col>
</Row>
</div>
)
}
export default CatalogeFilterButton;