Redux：无法弄清楚为什么ownProps与状态不同步

Question

为什么？ https://codepen.io/jamesplayer/project/editor/AjWvBb

我正在构建一个大型Redux应用程序，并设法产生了一个错误，其中传递了一个列表项，而该ID在商店中不再存在，因此当它从商店中获取完整的对象时，可以做到这一点。找不到它，导致错误已在react-redux here

中修复

要重现，需要非常特定的组件顺序来进行一些安装，分派，连接和渲染，因此我在此代码笔中创建了该问题的示例：https://codepen.io/jamesplayer/project/editor/AjWvBb

调整此设置中的大多数操作似乎可以解决该错误，但是我不确定为什么此特定设置会产生此问题。如果有人可以向我解释为什么这种特殊的事件顺序会引起我非常感激的错误，那么我一直在努力探究错误的根源。

基本结构如下：

<Parent>

    <Page1 "I dispatch an action to clear out the list items every time I mount,
            then re-populate them after about 500ms">

        <Page1Wrapper "I'm connected to the store. I get an update when my child 
                       Page1Child1 mounts">

            <Child1 "I dispatch an action when I mount that can affect Page1Wrapper">

            <Child2 "I'm connected to the store, though in this example I don't receive any updates that would cause a 
                     re-render">

                <List "I get a list of ids from the store. I pass each id to a ListItem">

                    <ListItem "I'm connected to the store. I get passed an id from 
                               List and fetch the whole listItem object">

    <Page2 "I don't do much, but going from page1 to page2 and then back to page1 is 
            a good way to reproduce the error">

Answer 1

问题

在ConnectedList中，state.listItems不为空，因此List呈现ConnectedListItem的实例。

但是，state.listItems在CLEAR_LIST_ITEMS可以从商店中获取ConnectedListItem操作之前将其清除，这导致它无法从现在清空的{{1} }。

此错误需要非常精确的时间来重现，这也许可以解释为什么更改周围的内容可以修复该错误（例如，state.listItems的渲染是否在ConnectedListItem之前完成）。

解决方案

如果您为CLEAR_LIST_ITEMS提供默认值（例如listItem），它将防止崩溃，并且const ListItem = ({ listItem = {} })将正确地使用更新后的ConnectedList重新呈现。

我建议不要在state.listItems中执行state.listItems.map(listItem => listItem.id)，因为这会导致组件始终重新呈现，因为即使connect不变，也会构造不同的数组。映射应在组件中完成，或改为使用reselect。

一种更清洁的方法是将整个商品传递给state.listItems，而无需将ListItem连接到商店：

ListItem