Приложение React застревает в компоненте Loading

Я скачал шаблон React Admin Template для изучения, я использую Django с django rest framework в качестве технологии бэкенда. У меня проблемы с отображением информации бэкенда во фронтенде. Мне уже удалось заставить информацию храниться в redux, но когда я запрашиваю компонент, который отображает эту информацию, он застревает в компоненте "Loading".

У меня есть кнопка, которая перенаправляет на url детализации товара:

function handleClick(item) {
props.history.push(`/apps/sales/enterprises/${item.id}`);

Затем компонент "Enterprise" будет отображен:

routes: [
{
  path: '/apps/sales/enterprises/:enterpriseId',
  component: lazy(() => import('./enterprise/Enterprise')),
},

Функция "getEnterprise" запущена в компоненте Enterprise:

useDeepCompareEffect(() => {
function updateEnterpriseState() {
  const { enterpriseId } = routeParams;

  if (enterpriseId === 'new') {
    /**
     * Create New Enterprise data
     */
    dispatch(newEnterprise());
  } else {
    /**
     * Get Enterprise data
     */
    dispatch(getEnterprise(routeParams)).then((action) => {
      /**
       * If the requested enterprise is not exist show message
       */
      if (!action.payload) {
        setNoEnterprise(true);
      }
    });
  }
}

updateEnterpriseState();
}, [dispatch, routeParams]);

getEnterprise Axios get request:

export const getEnterprise = createAsyncThunk('sales/enterprise', async (params) => {
  const response = await axios.get(
    `http://gustavohenry.localhost:8000/api/tenant/sale/enterprise/`,
    { params }
  );
  const data = await response.data;

  return data === undefined ? null : data;
});

Информация хранится в redux:

условие "if" в компоненте Enterprise равно True и возвращает компонент Loading (Вот где проблема):

if (
    _.isEmpty(form) ||
    (enterprise && routeParams.enterpriseId !== enterprise.id && routeParams.enterpriseId !== 'new')
  ) {
    return <FuseLoading />;
  }

Больше кода в компоненте Enterprise, который может быть релевантным:

  const dispatch = useDispatch();
  const enterprise = useSelector(({ sales }) => sales.enterprise);

  const routeParams = useParams();
  const [tabValue, setTabValue] = useState(0);
  const [noEnterprise, setNoEnterprise] = useState(false);
  const methods = useForm({
    mode: 'onChange',
    defaultValues: {},
    resolver: yupResolver(schema),
  });
  const { reset, watch, control, onChange, formState } = methods;
  const form = watch();

    useEffect(() => {
    if (!enterprise) {
      return;
    }
    /**
     * Reset the form on enterprise state changes
     */
    reset(enterprise);
  }, [enterprise, reset]);

  useEffect(() => {
    return () => {
      /**
       * Reset Enterprise on component unload
       */
      dispatch(resetEnterprise());
      setNoEnterprise(false);
    };
  }, [dispatch]);

Если оператор "if" равен False, то компонент выравнивается:

if (
    _.isEmpty(form) ||
    (enterprise && routeParams.enterpriseId !== enterprise.id && routeParams.enterpriseId !== 'new')
  ) {
    return <FuseLoading />;
  }

  return (
    <FormProvider {...methods}>
      <Root
        header={<EnterpriseHeader />}
        contentToolbar={
          <Tabs
            value={tabValue}
            onChange={handleTabChange}
            indicatorColor="primary"
            textColor="primary"
            variant="scrollable"
            scrollButtons="auto"
            classes={{ root: 'w-full h-64' }}
          >
            <Tab className="h-64" label="Basic Info" />
          </Tabs>
        }
        content={
          <div className="p-16 sm:p-24 max-w-2xl">
            <div className={tabValue !== 0 ? 'hidden' : ''}>
              <BasicInfoTab />
            </div>
          </div>
        }
        innerScroll
      />
    </FormProvider>
  );

Компонент вызывает "BasicInfoTab Component" (Здесь вызывается информация бэкенд-модели):

import TextField from '@mui/material/TextField';
import { useFormContext, Controller } from 'react-hook-form';

function BasicInfoTab(props) {
  const methods = useFormContext();
  const { control, formState } = methods;
  const { errors } = formState;

  return (
    <div>
      <Controller
        name="comercialName"
        control={control}
        render={({ field }) => (
          <TextField
            {...field}
            className="mt-8 mb-16"
            error={!!errors.name}
            required
            helperText={errors?.name?.message}
            label="Comercial Name"
            autoFocus
            id="comercialName"
            variant="outlined"
            fullWidth
          />
        )}
      />
    </div>
  );
}

export default BasicInfoTab;

Надеюсь, я правильно объяснил свою проблему, извините, если вопрос очень простой или если мой английский очень плох, я заранее благодарю вас.

Если требуется больше кода, я могу с радостью поделиться им с вами, я не знал точно, какие строки были наиболее релевантными

Вернуться на верх