从状态中删除键会导致呈现问题

Question

假设我正在编写一个Todo应用程序，允许创建待办事项组。

我的状态结构如下:

state = {
  groups: {
    groupName: [todoId],
  },
  todos: {
    ids: [todoId],
    byId: {
       todoId: todoObj,
    },
  },
}

我正在实现一个removeGroup操作。groups减速器将从给定的组名中选择所有todoId，将它们移动到默认组并删除旧组。我没有改变状态

我有三个React组件，TodoGroups, Group和Todo。

• TodoGroups基于getGroupNames(state)选择器中的groupNames道具呈现Group s列表。

• Group基于getGroupTodoIds(state, groupName)选择器中的todoIds道具呈现Todo s列表

getGroupNames只是运行Object.keys(state)，并按字母顺序排序。

---

现在，我的问题是:

当我触发removeGroup，我得到一个PropType警告，todoIds prop是未定义的。这个警告来自我刚刚删除的Group。

发生的是Group在TodoGroups收到新道具之前被重新渲染。因此，它仍然使用旧的名称，并且getGroupTodoIds返回undefined，因为旧的组已经不存在了。

这个问题的正确解决方案是什么?我可以在getGroupTodoIds, mapStateToProps甚至Group.defaultProps中回到一个空数组，但所有这一切似乎都朝着错误的方向发展。

Answer 1

正确的解决方案可能是不连接Group组件，而是从连接的TodoGroups组件传递必要的信息。

问题是调度:connect将在状态改变时通知所有连接的组件，但是这些组件的存在性本身依赖于状态。react如何知道在父进程完成呈现之前不更新子进程?你可以在这里阅读更多关于这方面的内容，并找到一些其他的解决方案，尽管我并没有完全跟上它。

也供参考，你可能没有得到任何东西从使用getGroupTodoIds(state, groupName)选择器:选择器基本上只是记忆函数，每次参数改变时重新计算。通过在每次渲染时使用多个不同的 groupName值调用它，它每次都被重新计算。