Блог

Я пытался использовать элемент фона пользовательского интерфейса material в своем коде. Я имею в виду этот пример: https://mui.com/components/backdrop/#example

Как только я ввожу этот код в свой компонент, он завершается ошибкой с сообщением об ошибке, как показано ниже.

Необработанная ошибка во время выполнения Ошибка: Недопустимый вызов соединения. Крючки могут вызываться только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM).
2. Возможно, вы нарушаете Правила Крючков
3. У вас может быть более одной копии React в одном приложении см. https://reactjs.org/link/invalid-hook-call для получения советов о том, как отладить и устранить эту проблему.

Мой код такой, как показано ниже.

 import React, { useState } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { Box,Typography } from '@material-ui/core'
import CategoryCard from '../shop-categories/category-card'
import { useSelector  } from 'react-redux';
//import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
//import ProductsInCategory from '../../../pages/shops/product-in-category';
import {useRouter} from 'next/router'
import Backdrop from '@mui/material/Backdrop'
import CircularProgress from '@mui/material/CircularProgress';
import { withStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
    heading : {
        fontFamily: 'Roboto',
        fontSize: 14,
        fontStyle: 'normal',
        fontWeight: 700,
        lineHeight: 1,
        color: props => props.pColor
    }
})


export default function CategoryGrid(props) {
  const { categories, shopId, title} = props;

  const shopColors = useSelector(state => state.main.currentShop)
  const classes = useStyles(shopColors);
  const router = useRouter()
  const [open, setOpen] = React.useState(false);

  const handleClose = () => {
    setOpen(false);
  };


  const  gotoSubCategories = (shopId, id,cat_Name) => {
    setOpen(true)
    router.push(`/shops/shop-sub-categories?shop=${shopId}amp;category=${id}amp;categoryName=${cat_Name}`)
  }

    return (
      <>
        <div>
        <Backdrop sx={{color: '#fff', zIndex: (theme) => theme.zIndex.drawer  1}}
                  open={open}
                  onClick={handleClose}
        >
          <CircularProgress color='inherit' />
        </Backdrop>
        </div>
          <Typography variant="body2" style={{ fontWeight: 'bold' }}
                className={classes.heading}>
              {title}
          </Typography>
          <Box display="flex" mb={2} mx={1} flexDirection="column">
            <Box display="flex" fontWeight='fontWeightBold' width={1/2} mb={1}>
          </Box>
          <Box display="flex" flexWrap="wrap">
          {
            categories.map((category, index) => {
              return <CategoryCard key={index}
                                name={category.name}
                                onClick={() => gotoSubCategories(shopId, category.id,category.name)}
                                imageURL={category.url}
                                shopId={shopId} callParent={props.callParent}
                     />
                })
          }
          </Box>
        </Box>
      </>
    )
  }
 

Если я удалю эту часть, то она будет работать нормально.

 <div>
   <Backdrop sx={{color: '#fff', zIndex: (theme) => theme.zIndex.drawer  1}}
           open={open}
           onClick={handleClose}
   >
   <CircularProgress color='inherit' />
   </Backdrop>
</div>
 

Как это исправить?