使用React+Redux时Normalizr返回Undefined数组问题排查

嘿，我一下子就发现问题出在哪啦！

你遇到的核心问题是normalizr 默认的实体标识字段不匹配：

• schema.Entity 默认会寻找名为 id（全小写）的字段作为每个实体的唯一标识键
• 但你的 API 返回的数据里，唯一标识是 ID（大写 D），所以 normalizr 找不到对应的标识，才会生成键为 undefined 的实体，结果数组里也全是 undefined

修复步骤 #

只需要在定义 walkthroughSchema 时，明确指定 idAttribute 为你的 API 返回的标识字段名即可：

修改你的 Schema 代码：

import { schema } from "normalizr";

// 添加第三个参数，指定idAttribute为"ID"
export const walkthroughSchema = new schema.Entity("walkthroughs", {}, {
  idAttribute: "ID"
});

export const walkthroughListSchema = [walkthroughSchema];

验证效果 #

修改后重新请求数据，normalizr 就能正确识别每个 walkthrough 的 ID 字段作为唯一标识：

• entities.walkthroughs 里的键会变成对应的 ID 值（比如 "5aa7317906ddabf5f7d76c58"）
• result 数组里也会是这些 ID 值，而不再是 undefined

小提示 #

如果以后遇到 API 返回的唯一标识不是默认的 id（比如 uuid、uid 等），都需要通过 idAttribute 这个配置项来告诉 normalizr 该用哪个字段作为实体标识哦～

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