2

Запрашиваю с сервера список товаров,а потом через 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;
4
  • В описании useEffect (learn-reactjs.ru/core/hooks/effect-hook) сказано, что он вызывается после каждой отрисовки. Не знаком с реактом и не могу подсказать где именно надо получать данные с сервера, но точно не в useEffect
    – Mike
    Commented 23 февр. 2022 в 10:18
  • Рекомендуют получать данные в componentDidMount
    – Mike
    Commented 23 февр. 2022 в 10:21
  • 1
    вторым параметром в useEffect укажите пустой массив. Commented 23 февр. 2022 в 11:38
  • @ЕвгенийНиколаев перестал,спасибо! Commented 23 февр. 2022 в 12:27

1 ответ 1

1

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

Решение очень простое:

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}))))        
        })
    /** указываем пустой массив зависимостей для хука, чтобы запрос за данными осуществлялся единожды в момент монтирования компонента */ 
}, [])

Ваш ответ

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

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