useEffect与React Hooks无限循环

Question

使用useEffect和对象引用时，React / Redux应用程序进入无限循环。

我正在尝试使用useEffect为我的应用程序渲染待处理待办事项..并将todos数组作为useEffect中的第二个参数传递..但为什么不检查对象的值？

容器：

const mapDispatchToProps = dispatch => ({ actions: bindActionCreators(RootActions, dispatch) });
const Home = (props) => {
  const { root, actions } = props;

  useEffect(() => {
    getTodos(actions.loadPendingTodo);
  }, [root.data]);

  return (
    <Segment>
      <Error {...root } />
      <TodoList { ...root } actions={actions} />
  </Segment>
  );
};

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

行动：

export const loadPendingTodo = () => ({
  type: LOAD_PENDING_TODO,
  data: todoService.loadPendingTodo(),
});

减速器：

const initialState = {
  initial: true,
  data: [{
    id: 0,
    text: 'temp todo',
    dueDate: new Date(),
    completedDate: '',
    isDeleted: false,
    isCompleted: false,
  }],
  error: false,
  isLoading: false,
  isEdit: false,
};

export default function root(state = initialState, action) {
  switch (action.type) {
    case LOAD_PENDING_TODO:
      return {
        ...state,
        data: [...action.data],
      };
...

    default:
      return state;
  }
}

getTodos方法：

export const getTodos = (loadTodo) => {
  try {
    loadTodo();
  } catch (error) {
    console.log(error); // eslint-disable-line
  }
};

服务：

export default class TodoAppService {
  loadPendingTodo() {
    return store.get('todoApp').data.filter(todo => !todo.isCompleted && !todo.isDeleted);
  }

任何人都可以帮我解决这个问题..并且这个案例也没有官方文档：/

此外，将useEffect更改为以下作品，但我想渲染每一个变化

  useEffect(() => {
    getTodos(actions.loadPendingTodo);
  }, []);

Answer 1

通过删除loadPedningTodo中导致它循环并直接在服务中设置函数中的数据的useEffect redux动作来修复它。

const Home = (props) => {
  const { root, actions } = props;
  return (
    <Segment>
      <Error {...root } />
      <TodoList isEdit={root.isEdit} todo={todoService.loadPendingTodo()} actions={actions} />
  </Segment>
  );
};

谢谢 ：）