reactjs - 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 的实例。

但是，在 ConnectedListItem 可以从商店获取它之前，state.listItems 已被 CLEAR_LIST_ITEMS 操作清除，这导致它无法从现已清空的 state.listItems 中查找任何匹配项。

此错误需要非常精确的计时才能重现，这可能可以解释为什么更改周围的内容可以修复它(例如，如果 ConnectedListItem 的渲染在 CLEAR_LIST_ITEMS 之前完成)。

解决方案

如果您为 listItem 提供默认值(例如 const ListItem = ({ listItem = {} }))，它将防止崩溃并且 ConnectedList 将使用更新后的 state.listItems 正确重新渲染。

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

更简洁的方法是将整个项目传递给 ListItem，从而无需将 ListItem 连接到存储:

const ListItem = ({ item }) => <li>{item.text}</li>;

const List = ({ listItems }) => (
  <div style={{ backgroundColor: 'lightgreen' }} className="border">
    I'm List and I get a list of ids from the store. I pass each id to a ListItem.
    <ul>{listItems.map(item => <ListItem key={item.id} item={item} />)}</ul>
  </div>
);

const ConnectedList = connect(state => ({
  listItems: state.listItems,
}))(List);