在 react-redux 应用程序中，useEffect 内部永远不会运行

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

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run.

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

您似乎有 3 个依赖项：

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

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

在 react-redux 应用程序中，useEffect 内部永远不会 运行

Inside useEffect is never run in react-redux application

reactjs

redux

react-redux

react-hooks

在 react-redux 应用程序中，useEffect 内部永远不会运行