内部 useEffect 永远不会在 react-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 或 state 的值，所以它永远不需要重新运行。

所以它只运行一次（当props.loading 是true 时）并且再也不会运行。

您似乎有 3 个依赖项：

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

另请参阅：react-hooks/exhaustive-depseslint rule。