const AllServices = () => {
const navigationPrevRef = React.useRef(null);
const navigationNextRef = React.useRef(null);
const { data: popularServies } = useGetPopularServicesQuery();
const { data: organizations } = useGetOrganizationsQuery();
const toShowServices = (id: string) => {
console.log({ id });
const { data } = useGetServicesByOrgationzationQuery(id); // при клике возникает такая ошибка react-dom.development.js:14906 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
console.log('check:', data);
};
console.log({ organizations });
return (
<div style={{ margin: '0 auto', maxWidth: '1440px' }}>
<TitleWithSearch title='Услуги' placeholder='Найдите услуги' />
<div className='slider-suppliers' style={{ marginTop: '80px' }}>
<Row justify={'space-between'}>
<div className='prevSlider' ref={navigationPrevRef}>
<img src={prevSlider} alt='' />
</div>
<div className='nextSlider' ref={navigationNextRef}>
<img src={nextSlider} alt='' />
</div>
<Swiper
style={{ marginTop: '20px' }}
// @ts-ignore
slidesPerView={1}
spaceBetween={10}
pagination={{
clickable: true,
}}
breakpoints={{
640: {
slidesPerView: 5,
spaceBetween: 50,
},
}}
navigation={{
prevEl: navigationPrevRef.current,
nextEl: navigationNextRef.current,
}}
modules={[A11y, Scrollbar, Navigation, Pagination]}
onBeforeInit={(swiper) => {
if (typeof swiper.params.navigation === 'object') {
swiper.params.navigation.prevEl = navigationPrevRef.current;
swiper.params.navigation.nextEl = navigationNextRef.current;
}
}}
className='mySwiper'
>
{organizations?.data.map((item: any) => (
<SwiperSlide
style={{ cursor: 'pointer' }}
key={item?.id}
onClick={(e) => {
e.stopPropagation();
toShowServices(item.id);
}}
>
{item?.name}
</SwiperSlide>
))}
</Swiper>
</Row>
</div>
<div className='services-block'>
<div className='cards-services'>
{popularServies?.map((item) => (
<ItemService key={item.id} service={item} />
))}
</div>
</div>
</div>
);
};
export default AllServices;
Как можно было бы переформулировать функцию?
Средний
