React Redux接口数据映射异常 状态键显示undefined求助

你的reducer中两个拉取数据的action处理逻辑完全写反，和接口返回的数据格式不匹配，是所有异常的直接来源。

• 为什么console.log打印返回值为数字，而非预期的对象/数组标识：
  _.mapKeys的设计用途是接收数组作为第一个入参，将数组项按指定属性值为键转成对象。你误将单个客户详情接口的返回值（单个对象）传入该方法时，lodash会遍历对象的可枚举属性，最终生成的对象键为属性遍历的数字索引，和你预期的ClientUno作为键的结构完全不符，打印时自然会出现数字键。
• 为什么Redux DevTools中对象键名位置显示undefined：
  FETCH_CLIENTS是拉取全量客户列表的action，对应接口返回的是客户数据数组。你写的[action.payload.ClientUno]逻辑是在数组对象上读取ClientUno自定义属性，数组本身不存在这个属性，读取结果为undefined，你将这个undefined作为对象键存储数据，DevTools里自然会显示undefined作为键名。

调换两个FETCH action的处理逻辑，和接口返回格式对齐即可，修正后的reducer代码如下：

import _ from 'lodash';
import { 
  FETCH_CLIENT,
  FETCH_CLIENTS,
  ADD_CLIENTS_COMMENTS
} from "../actions/types";

export default (state = {}, action) => {
  switch (action.type) {
    // 单个客户详情接口返回单个对象，直接用ClientUno为键存储
    case FETCH_CLIENT:
      return { ...state, [action.payload.ClientUno]: action.payload };
    // 客户列表接口返回数组，用mapKeys转为ClientUno为键的对象合并到状态
    case FETCH_CLIENTS:
      return { ...state, ..._.mapKeys(action.payload, 'ClientUno') };
    case ADD_CLIENTS_COMMENTS:
      return { ...state, [action.payload.ClientUno]: action.payload }; 
    default:
      return state;
  }
};

1. Redux DevTools中clients状态节点下的键均为对应客户的ClientUno值，不会再出现undefined键
2. 现有mapStateToProps中通过Object.values(state.clients)取出的数组格式正确，可直接用于列表渲染，不会再出现数字键的异常打印

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