Внутри useEffect никогда не запускается в приложении Reaction-Redux

Question

У меня есть следующий компонент. Я сделал отладку. Функция внутри useEffect никогда не вызывается. Код достигает значения useEffect, но затем не входит внутрь, и, следовательно, не получает записи из базы данных. Есть идеи, почему это происходит?

import * as React from 'react';
import { useEffect } from 'react';
import { connect } from 'react-redux';
import { FetchAssignmentData } from './AssignmentDataOperations'

const AssignmentComprehensive = (props) => {

    useEffect(() => {
        if (props.loading != true)
            props.fetchAssignment(props.match.params.id);
    }, []);

    if (props.loading) {
        return <div>Loading...</div>;
    }

    if (props.error) {
        return (<div>{props.error}...</div>)
    }

    //these are always null
    const assignmentId = props.assignmentIds[0];
    const assignment = props.assignments[assignmentId];

    return (
        //this throws error since the values are never fetched from db
        <div>{props.assignments[props.assignmentIds[0]].title}</div>
    );
}

const mapStateToProps = state => ({
    assignmentIds: state.assignmentReducer.assignmentIds,
    assignments: state.assignmentReducer.assignments,
    submissions: state.assignmentReducer.submissions,
    rubric: state.assignmentReducer.rubric,
    loading: state.assignmentReducer.loading,
    error: state.assignmentReducer.error
})

const mapDispatchToProps = dispatch => {
    return { fetchAssignment: (id) => dispatch(FetchAssignmentData(id)) };
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(AssignmentComprehensive);

Answer 1

Из-за useEffect второго аргумента:

https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

Если вы хотите запустить эффект и очистить его только один раз (при монтировании и размонтировании), выможет передать пустой массив ([]) в качестве второго аргумента.Это говорит React, что ваш эффект не зависит от каких-либо значений из реквизита или состояния, поэтому его не нужно повторно запускать.

Таким образом, он запускается только один раз (когда props.loading равен true) и никогда больше.

Похоже, у вас есть 3 зависимости:

useEffect(() => {
  ...
}, [props.loading, props.fetchAssignment, props.match.params.id])

См. также: react-hooks/exhaustive-deps Правило eslint .