Javascript 在React Redux中，api被多次在循环中调用

在获取redux传奇中的记录时，我面临着奇怪的行为。当我试图从类中调用useeffect中的操作时，它在循环中被多次调用。因此，存在无限的api调用

谁能告诉我哪里错了吗？下面是我的代码

减速器

// @flow
import {
    FETCH_DOCTOR_PROFILE,
    FETCH_DOCTOR_PROFILE_SUCCESS,
    FETCH_DOCTOR_PROFILE_ERROR
} from "./actionTypes";

const INIT_STATE = {
    error: null,
    isLoading: false,
    doctorProfile: {}
};

const DoctorProfileReducer = (state = INIT_STATE, action) => {
    switch (action.type) {
        case FETCH_DOCTOR_PROFILE:
            return {
                ...state,
                isLoading: true
            };
        case FETCH_DOCTOR_PROFILE_SUCCESS:
            return {
                ...state,
                isLoading: false,
                doctorProfile: action.payload
            };
        case FETCH_DOCTOR_PROFILE_ERROR:
            return {
                ...state,
                isLoading: false,
                error: action.error
            };
        default:
            return state;
    }
};

export default DoctorProfileReducer;

行动

import {
    FETCH_DOCTOR_PROFILE,
    FETCH_DOCTOR_PROFILE_SUCCESS,
    FETCH_DOCTOR_PROFILE_ERROR
} from "./actionTypes";

export const fetchDoctorProfileAction= () => ({
    type: FETCH_DOCTOR_PROFILE
});

export const fetchDoctorProfileSuccessAction= (doctorProfile) => ({
    type: FETCH_DOCTOR_PROFILE_SUCCESS,
    payload: doctorProfile
});

export const fetchDoctorProfileErrorAction= (error) => ({
    type: FETCH_DOCTOR_PROFILE_ERROR,
    error: error
});

传奇

import { takeEvery, fork, put, all, call } from 'redux-saga/effects';

// Redux States
import { FETCH_DOCTOR_PROFILE } from './actionTypes';
import { fetchDoctorProfileSuccessAction, fetchDoctorProfileErrorAction } from './actions';
import { fetchDoctorProfileApi } from '../../../services/doctorProfile';

import {FETCH_DOCTOR_PROFILE_URL} from '../../../helpers/urls';

function* fetchDoctorProfileSaga() {
    try {
        const response = yield call(fetchDoctorProfileApi,FETCH_DOCTOR_PROFILE_URL);
        yield put(fetchDoctorProfileSuccessAction(response));
    } catch (error) {
        yield put(fetchDoctorProfileErrorAction(error));
    }
}

export function* watchFetchDoctorProfile() {
    yield takeEvery(FETCH_DOCTOR_PROFILE, fetchDoctorProfileSaga)
}

function* doctorProfileSaga() {
    yield all([
        fork(watchFetchDoctorProfile),
    ]);
}

export default doctorProfileSaga;

呼叫页面

useEffect(() => {
        props.fetchDoctorProfileAction();
        const result = props.doctorProfile;
    });

...........

const mapStateToProps = (state) => {
    const { error, doctorProfile, pending } = state.DoctorProfileReducer;
    return { error , doctorProfile, pending };
}

export default withRouter(connect(mapStateToProps, {fetchDoctorProfileAction})(ProfessionalProfilePrimary));

---

我认为您需要在useffect（）钩子中添加一个条件：

---

注意：在您的组件

MapStateTrops

中，您有

挂起的
，但在您的商店中，您有
正在加载的
；确保正确地将状态映射到prop；）
 但它仍然被多次呼叫。对不起，我的错误；条件不对。您还应该检查是否没有挂起的请求。我将更新代码。谢谢，它正在工作。将您的答案标记为正确。：）
useEffect(() => {
  if (!props.doctorProfile && !props.pending) {
    props.fetchDoctorProfileAction();
  }
  
  const result = props.doctorProfile;
}, [props.doctorProfile, props.pending]);