useEffect 与 React Hooks 进入无限循环

Question

React/Redux 应用程序在对对象引用使用 useEffect 时进入无限循环..

我正在尝试使用 useEffect 为我的应用程序呈现挂起的待办事项，并将待办事项数组作为 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

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

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

谢谢:)

useEffect 与 React Hooks 进入无限循环

useEffect goes in inifinite loop with React Hooks

javascript

reactjs

react-hooks