useEffect 使用 React Hooks 进入无限循环答案

【问题标题】：useEffect goes in inifinite loop with React HooksuseEffect 使用 React Hooks 进入无限循环
【发布时间】：2019-04-21 13:59:42
【问题描述】：

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);
  }, []);

【问题讨论】：

尝试改写useEffect(() => ..., root.data) 看看是否有帮助，因为root.data 将是每次更新的新数组。
无效...同样的问题
它的紧急......否则我必须回到传统的反应......
LOAD_PENDING_TODO 操作在每次 fetch 后创建一个新的 root.data 数组，因此它会再次启动 fetch
@Animir 我相信这就是 redux 的使用方式.. redux 中不允许状态突变..

标签： javascript reactjs react-hooks

【解决方案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>
  );
};

谢谢:)

【讨论】：