reactjs - useSelector() 不会在更新时重新渲染组件

Question

我有一个呈现患者信息的功能组件。在组件中，正在 useEffect 中调度 3 个操作。钩，如下图。每个 Action 都在发出一个异步网络请求。

useEffect(()=>{
        dispatch(fetchInpatient(patient_id));
        dispatch(fetchAllDoctors());
        dispatch(fetchVacantRooms());
    }, []);

我也在使用 useSelector 获取状态像这样:

    const inpatient = useSelector(state => state.inpatient.inpatient);
    const doctors = useSelector(state => state.doctors.doctors);
    const vacantRooms = useSelector(state => state.vacantRooms.vacantRooms);

我的返回码取决于这 3 个获取的状态。所以，它看起来像这样:

if(inpatient && doctors && vacantRooms){
        //render user info
}
else{
        //render loading icon
}

现在，最初 inpatients , doctors和 vacantRooms填充了默认状态或以前的状态。但是当所有 Action 都被分派(dispatch)并更新状态时， useSelector不会重新渲染我的组件，因此它会显示以前患者的信息，直到我手动刷新页面。解决这个问题的方法是什么？我究竟做错了什么？
这些是我的 reducer :

export default (state = {} , action) => {
    switch(action.type){
        case 'FETCH_INPATIENT':
            return {...state , inpatient: action.payload};
        default:
            return state;
    }
}
export default (state = {} , action) => {
    switch(action.type){
        case 'FETCH_ALL_DOCTORS':
            return {...state , doctors: action.payload};
        default:
            return state;
    }
}
export default (state = {} , action) => {
    switch(action.type){
        case 'FETCH_VACANT_ROOMS':
            return {...state , vacantRooms: action.payload};
        default:
            return state;
    }
}

所有这些都在单独的文件中。我的 reducers/index是这样的:

import{ combineReducers } from 'redux';
import inpatientsReducer from './inpatientsReducer';
import inpatientReducer from './inpatientReducer';
import allDoctorsReducer from './allDoctorsReducer';
import vacantRoomsReducer from './vacantRoomsReducer';

export default combineReducers({
    inpatients: inpatientsReducer,
    inpatient: inpatientReducer,
    doctors: allDoctorsReducer,
    vacantRooms: vacantRoomsReducer
});

我的 fetchInpatient(id) Action 创建者是:

export const fetchInpatient = (inpatient_id) => {
    return async (dispatch) => {
        const response = await axios.post('http://localhost:3001/api/inpatients/display' , {inpatient_id});
        dispatch({
            type: 'FETCH_INPATIENT',
            payload: response.data
        })
    }
}

Answer 1

A useEffect与依赖数组 Hook []只会在第一次安装组件时运行一次。
您的提取操作取决于 patient_id变量，所以你应该包括 patient_id在您的依赖项中。