Question

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

我的州的结构如下：

state = {

  groups: {
    groupName: [todoId],
  },

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

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

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

TodoGroups根据来自Group选择器的groupNames道具呈现getGroupNames(state)个列表。
Group根据Todo选择器

todoIds

getGroupTodoIds(state, groupName)

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

现在，这是我的问题：

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

在Group收到新道具之前，TodoGroups会重新呈现。因此，它仍使用旧名称，getGroupTodoIds返回undefined，因为旧组不再存在。

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

Answer 1

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

问题是调度：当状态发生变化时，connect会警告所有连接的组件，但某些组件的存在本身依赖于状态。在父完成渲染之前，反应如何知道不更新子项？您可以阅读更多相关信息并找到其他解决方案here，但我并不完全了解它。

同样，你可能没有得到任何使用function onPcRight() { console.log(1);} function onTouchRight() { console.log(2);} $('#container').mousedown(function(ev) { if (ev.button === BUTTON_RIGHT) { if ($(this).prop('touchdown')) onTouchRight(); else onPcRight(); } }) .on('touchstart', function() { $(this).prop('touchdown', true); }) .on('touchend', function() { $(this).prop('touchdown', false); });选择器的东西：选择器基本上只是memoized函数，每次参数更改时都会重新计算。通过在每个渲染上使用多个不同的 groupName值调用它，每次都会重新计算它。

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

1 个答案: