从状态中删除键会导致渲染问题

Question

假设我正在编写一个允许创建 待办事项组.

的待办事项应用程序

我的状态结构如下：

state = {

  groups: {
    groupName: [todoId],
  },

  todos: {
    ids: [todoId],
    byId: {
       todoId: todoObj,
    },
  },
}

我正在实施 removeGroup 操作。 groups reducer 将从给定的组名中选择所有 todoIds，将它们移动到默认组并删除旧组。我不会改变状态。

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

TodoGroups 根据 getGroupNames(state) 选择器的 groupNames 属性呈现 Group 的列表。
Group 根据 getGroupTodoIds(state, groupName) 选择器
[=65= 的 todoIds 属性呈现 Todo 列表]

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

现在，这是我的问题：

当我触发 removeGroup 时，我收到一个 PropType 警告，指出 todoIds 道具未定义。该警告来自我刚刚删除的 Group。

发生的事情是 Group 在 TodoGroups 收到新道具之前重新渲染。因此，它仍然使用旧名称和 getGroupTodoIds returns undefined 因为旧组不再存在。

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

Answer 1

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

问题在于调度：connect 会在状态更改时提醒所有连接的组件，但其中一些组件的存在 本身取决于状态。 React 如何知道在父级完成渲染之前不更新子级？您可以阅读更多相关信息并找到一些其他解决方案 here，但我并不完全了解它。

此外，您可能不会从使用 getGroupTodoIds(state, groupName) 选择器中得到任何东西：选择器基本上只是记忆函数，每次参数更改时都会重新计算。通过在每个渲染器上使用多个 不同的 groupName 值调用它，它每次都会重新计算。

Removing a key from state causes problems with rendering