在反应钩子中完成另一个提取后立即提取数据

Question

我有三个独立的useEffect 函数。一种是获取提交记录：

useEffect(() => {
    if (props.loading_submissions != true) {
        props.fetchSubmissionsByReviewRound(reviewRoundId);
    }
}, [reviewRoundId])

另一个是用于获取学生。

useEffect(() => {
    if (props.loading_students != true) {
       props.fetchStudentsByCourse(courseId, reviewRoundId);
    }
}, [reviewRoundId])

我更喜欢先获取Students，一旦它们被加载并保存为redux状态，就应该获取提交。我想知道我怎么能做到这一点。任何帮助表示赞赏。

下面是mapStateToProps 和mapDispatchToProps 方法：

const mapStateToProps = (state) => ({
    submissions: state.submissionReducer.submissions,        
    students: state.studentReducer.students,
    loading_students: state.studentReducer.loading,
    loading_submissions: state.submissionReducer.loading,
    error: state.studentReducer.error,

})

const mapDispatchToProps = (dispatch) => {
    return {
        fetchSubmissionsByReviewRound: (reviewRoundId) => dispatch(FetchSubmissionsByReviewRound(reviewRoundId)),            

        fetchStudentsByCourse: (courseId, reviewRoundId) => dispatch(FetchStudentsByCourse(courseId, reviewRoundId)),
    }
}

我正在使用axios 获取数据：

export function FetchStudentsByCourse(courseId, reviewRoundId) {
    return dispatch => {

        dispatch(studentsDataOperationBegin());

        axios.get("api/Student/FetchStudentsByCourse", { params: { courseId, reviewRoundId } })
            .then(response => {
                console.log('Students in the course are fetched by course id.');

                const students = new schema.Entity('students');

                const normalizedData = normalize(response.data, [students]);
                dispatch(fetchStudentsSuccess(normalizedData.entities.students))
            })
            .catch(error => { studentsDataOperationFailure(error) });
    }

}


export function FetchSubmissionsByReviewRound(reviewRoundId) {

    return dispatch => {

        dispatch(submissionDataOperationBegin());

        axios.get('api/Submission/FetchSubmissionsByReviewRound', { params: { reviewRoundId } })
            .then(response => {
                console.log('Submissions are fetched.');

                const submissions = new schema.Entity('submissions');

                const normalizedData = normalize(response.data, [submissions]);
                dispatch(fetchSubmissionsByReviewRoundSuccess(normalizedData.entities.submissions))
            })
            .catch(error => { submissionDataOperationFailure(error) });
    }
}

Answer 1

如果您希望其中一个依赖于另一个，那么我将在一个 useEffect() 方法下加入它们，并从它们中生成 promise 函数。完成后， async/await 将成为您的朋友。

但是，如果您希望将来自 Students 调用的数据加载给用户，然后浏览器去获取另一个，那么我将使用第二个 setState 来监视由第一的。比如这样：

const [studentDataReceived, setStudentDataReceived] = useState(false);

useEffect(() => {
    if (props.loading_students != true) {
       props.fetchStudentsByCourse(courseId, reviewRoundId);
    }
    setStudentDataReceived(true)
}, [reviewRoundId])

useEffect(() => {
  if(studentDataReceived){
    if (props.loading_submissions != true) {
        props.fetchSubmissionsByReviewRound(reviewRoundId);
    }
  }
}, [studentDataReceived])