Question

在我的react应用程序中，我在仪表板组件上具有以下代码。

const DashboardPage = ({ user, profile, getAuthProfileStart }: IProps) => {
  useEffect(() => {
    getAuthProfileStart();
  }, []);

仪表盘容器已经被withSpinner HOC包裹了。

import { connect } from 'react-redux';
import { compose } from 'redux';

import { WithSpinner } from 'components/ui';
import Dashboard from './dashboard.page';

import { IReduxState } from 'types/reducer.types';

import * as alertActions from 'redux/alert/alert.actions';
import * as profileActions from 'redux/profile/profle.actions';

const mapStateToProps = ({
  auth: { user },
  profile: { authProfile, profileFetching },
}: IReduxState) => ({
  user,
  profile: authProfile,
  isLoading: profileFetching,
});

const actions = {
  startAlert: alertActions.startAlert,
  getAuthProfileStart: profileActions.getAuthProfileStart,
};

export default compose(connect(mapStateToProps, actions), WithSpinner)(Dashboard);

这是WithSpinner组件。

import React from 'react';

import './with-spinner.styles.scss';

const WithSpinner = (WrappedComponent: any) => {
  const Spinner = ({ isLoading, ...otherProps }: IProps) => {
    return isLoading && WrappedComponent ? (
      <div className='spinner-overlay'>
        <div className='spinner-container' />
      </div>
    ) : (
      <WrappedComponent {...otherProps} />
    );
  };

  return Spinner;
};

interface IProps {
  isLoading: boolean;
}

export default WithSpinner;

现在的问题是，在加载仪表板页面时，isLoading变为true。然后显示加载程序。一旦完成传奇，isLoading就会为假。然后显示该组件。然后再次调用useEffect并分派getAuthProfileStart操作。这是一个循环。如何在useEffect内检查redux上的配置文件是否已更改？我做错了吗？检查useEffect中的prevProps.profile !== nextProps.profile是否是个好主意？

使用带有上一个和下一个道具的UseEffect进行反应

0 个答案: