Redux状态更新后UI未更新及map不是函数报错的排查与解决

问题根源 #

你遇到的报错本质是lists字段的数据类型被错误修改：

• 初始状态里lists是数组类型，支持map遍历
• 你最初写的ADD_LIST_ITEM reducer分支里，用对象大括号{}包裹了map返回的数组，相当于把数组的每一项作为键值对塞到了新对象里，导致执行完这个action之后，state.list.lists从数组变成了普通对象，调用map方法自然会报错。

修复方案 #

你已经找到了核心问题，把reducer里lists赋值的外层大括号{}换成数组中括号[]即可，修改后的正确写法如下：

case ADD_LIST_ITEM:
      return {
        ...state,
        lists: state.lists.map(list =>
          list._id === payload.id
            ? { ...list, listItems: payload.data }
            : list
        ),
        loading: false
      };

注：这里map本身已经返回新数组，不需要额外用扩展运算符...再包裹一层，也可以正常运行

可选优化点 #

• 删掉List.jsx里空依赖的useEffect调用getLists：Dashboard组件加载时已经拉取过全量列表，新增列表项后reducer已经直接更新了store数据，connect会自动触发组件重渲染，不需要再重复调用接口拉取列表，避免多余请求和时序问题。
• 补充List组件的list属性类型校验：你在组件里使用了list._id、list.listItems等属性，但propTypes里没有声明list的校验规则，建议补充。
• 建议ListItem的key不要用数组下标index，改用列表项本身的唯一id，避免列表顺序变化时出现渲染异常。

内容的提问来源于stack exchange，提问作者Umar Khan