useEffect входит в бесконечный цикл с React Hooks - PullRequest
Новая
       12

useEffect входит в бесконечный цикл с React Hooks

0 голосов
/ 21 апреля 2019

Приложение 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);
  }, []);

1 Ответ

0 голосов
/ 21 апреля 2019

Исправлено это путем удаления loadPedningTodo избыточных действий в useEffect, которые вызывали его зацикливание, и прямой установки данных в функции из сервиса. 

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

спасибо:)

...