React 组件正在无限地重新渲染

Question

首先，我真的很陌生； 所以，抱歉，对于初学者的问题。

我有一个带有 Redux 和 Redux Saga 的 React 应用程序。

其中一个组件如下所示：

import { TableContainer, TableHead, TableRow } from '@material-ui/core';
import Paper from '@material-ui/core/Paper';
import makeStyles from '@material-ui/core/styles/makeStyles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { ProgramCategory } from '../model/program-category';
import { ProgramCategoryItemRow } from '../ProgramGategoryItemRow/ProgramCategoryItemRow';
import { ProgramCategoryActions } from '../store/program-category.actions';
import { ProgramCategorySelectors } from '../store/program-category.selectors';

const useStyles = makeStyles({
  table: {
    width: '100%',
  },
  tableHeadCell: {
    fontWeight: 'bold',
  },
});

export interface ProgramCategoriesTableProps {
  isLoaded: boolean;
  categories: ProgramCategory[];
  fetchAllCategories: () => void;
}

export const PureProgramCategoriesTable: React.FC<ProgramCategoriesTableProps> = ({
  isLoaded,
  categories,
  fetchAllCategories,
}) => {
  useEffect(() => {
    console.error('in useEffect');
    fetchAllCategories();
  });

  const styles = useStyles();

  return (
    <TableContainer component={Paper}>
      // the rest
      <TableBody>
          {categories.map(c => (
            <ProgramCategoryItemRow category={c} />
          ))}
      </TableBody>
    </TableContainer>
  );
};

const mapStateToProps = createSelector(
  [ProgramCategorySelectors.isLoaded, ProgramCategorySelectors.getAll],
  (isLoaded, categories) => ({ isLoaded, categories }),
);

const mapDispatchToProps = {
  fetchAllCategories: ProgramCategoryActions.fetchAll.start,
};

export const ProgramCategoriesTable = connect(mapStateToProps, mapDispatchToProps)(PureProgramCategoriesTable);

处理ProgramCategoryActions.fetchAll.start如下：

import { call, put, takeLatest } from 'redux-saga/effects';
import { ProgramCategoryApi } from '../services/program-category.api';
import { ProgramCategoryActions } from './program-category.actions';

function* handleFetchAll() {
  try {
    const categories = yield call(ProgramCategoryApi.fetchAll);
    yield put(ProgramCategoryActions.fetchAll.success(categories));
  } catch (e) {
    yield put(ProgramCategoryActions.fetchAll.failure(e));
  }
}

export function* programCategorySagas() {
  yield takeLatest(ProgramCategoryActions.fetchAll.start.type, handleFetchAll);
}

一切都说得通，但是发生的事情我的动作代码会一遍又一遍地执行。 再深入研究一下，似乎效果钩子也被一遍又一遍地执行。 如果我理解正确，发生这种情况是因为状态中的数据正在发生变化，组件再次重​​新渲染。 但是，它导致无限循环。 我究竟做错了什么？ 设置这种组件的正确方法是什么？

我发现的选项之一是将传奇更改为：

function* handleFetchAll() {
  try {
    const alreadyLoaded = select(ProgramCategorySelectors.isLoaded);
    if (!alreadyLoaded) {
      const categories = yield call(ProgramCategoryApi.fetchAll);
      yield put(ProgramCategoryActions.fetchAll.success(categories));
    }
  } catch (e) {
    yield put(ProgramCategoryActions.fetchAll.failure(e));
  }
}

所以，它只调用 api 一次； 它似乎以这种方式工作得很好。 但是，这是正确的解决方案吗？

正如评论中所建议的，我尝试为效果添加依赖项：

useEffect(() => {
    fetchAllCategories();
  }, []);

现在，我收到一个错误：

./src/program/ProgramCategoriesTable/ProgramCategoriesTable.tsx 第 37:6 行：React Hook useEffect 缺少依赖项：'fetchAllCategories'。 包括它或删除依赖项数组。 如果 'fetchAllCategories' 更改过于频繁，请找到定义它的父组件并将该定义包装在 useCallback react-hooks/exhaustive-deps 中

Answer 1

问题在这里，

useEffect(() => {
  console.error('in useEffect');
  fetchAllCategories();
});

来自 react 文档：useEffect 是否在每次渲染后运行？ 是的！ 默认情况下，它会在第一次渲染之后和每次更新之后运行。 （我们稍后将讨论如何自定义它。）与其考虑“安装”和“更新”，您可能会发现更容易认为效果发生在“渲染之后”。 React 保证 DOM 在它运行效果时已经更新。

https://reactjs.org/docs/hooks-effect.html

你必须在最后传递和依赖数组。

useEffect(() => {
  console.error('in useEffect');
  fetchAllCategories();
}, []);

希望这可以帮助！