Reactjs 如何使用；“正常化”吗；？

我有一个API的回复

{
    "current_page": 1,
    "data": [
        {
            "id": 1,
            "category_id": 1,
            "creator_id": 1,
            "instructor_id": 1,
            "difficulty_id": 1,
            "status_id": 1,
            "title": "hebae",
            "overview": "Course Overview",
            "deleted_at": null,
            "created_at": "2020-01-02 15:16:08",
            "updated_at": "2020-01-02 15:16:08"
        },
        {
            "id": 2,
            "category_id": 1,
            "creator_id": 1,
            "instructor_id": 2,
            "difficulty_id": 1,
            "status_id": 1,
            "title": "update course 1",
            "overview": "Course Overview",
            "deleted_at": null,
            "created_at": "2020-01-02 15:18:40",
            "updated_at": "2020-01-02 15:19:06"
        },
        {
            "id": 3,
            "category_id": 1,
            "creator_id": 1,
            "instructor_id": 1,
            "difficulty_id": 1,
            "status_id": 1,
            "title": "hebaTest",
            "overview": "Course Overview",
            "deleted_at": null,
            "created_at": "2020-01-02 15:24:09",
            "updated_at": "2020-01-02 15:24:09"
        },
        {
            "id": 4,
            "category_id": 2,
            "creator_id": 1,
            "instructor_id": 1,
            "difficulty_id": 1,
            "status_id": 1,
            "title": "hebaTest",
            "overview": "Adile",
            "deleted_at": null,
            "created_at": "2020-01-02 15:25:03",
            "updated_at": "2020-01-02 15:25:03"
        },
        {
            "id": 5,
            "category_id": 2,
            "creator_id": 1,
            "instructor_id": 1,
            "difficulty_id": 1,
            "status_id": 1,
            "title": "hebaTest",
            "overview": "Adile",
            "deleted_at": null,
            "created_at": "2020-01-02 15:33:06",
            "updated_at": "2020-01-02 15:33:06"
        },
        {
            "id": 6,
            "category_id": 1,
            "creator_id": 1,
            "instructor_id": 1,
            "difficulty_id": 1,
            "status_id": 1,
            "title": "Course Title",
            "overview": "Course Overview",
            "deleted_at": null,
            "created_at": "2020-01-05 08:24:56",
            "updated_at": "2020-01-05 08:24:56"
        },
    ],
    "first_page_url": "http://skillboardbackend-staging.zph2jwe3pc.eu-west-1.elasticbeanstalk.com/api/course?page=1",
    "from": 1,
    "last_page": 2,
    "last_page_url": "http://skillboardbackend-staging.zph2jwe3pc.eu-west-1.elasticbeanstalk.com/api/course?page=2",
    "next_page_url": "http://skillboardbackend-staging.zph2jwe3pc.eu-west-1.elasticbeanstalk.com/api/course?page=2",
    "path": "http://skillboardbackend-staging.zph2jwe3pc.eu-west-1.elasticbeanstalk.com/api/course",
    "per_page": 15,
    "prev_page_url": null,
    "to": 15,
    "total": 29
}

我试图将“数据”数组定义为“categories”对象，其余数据可以保持不变，如何使用normalizer实现这一点

我试过这个

const { data } = await apiGetAllCategories();

const dataSchema = new schema.Entity("categories");
const coursesSchema = new schema.Entity("info", {
    data: [dataSchema]
});
const normalizedData = normalize(data, coursesSchema);
console.log(normalizedData);

但它总是给我未定义的“信息”和未定义的“结果”

---

我做错了什么？

您的数据似乎已经以某种简化/规范化的形式出现，因为我没有看到任何嵌套或重复的数据结构。我认为数据上的一个简单数组：：reduce就足以满足您的需要

// Reduce data array to map [element.id => element]
const dataObject = data.reduce((dataObject, item) => {
  dataObject[item.id] = item;
  return dataObject;
}, {});

const数据=[
{
id:1，
类别识别号：1，
创建者id:1，
讲师编号：1，
难度：1，
身份证号码：1，
标题：“hebae”，
概述：“课程概述”，
已删除位置：null，
创建于：“2020-01-02 15:16:08”，
更新地址：“2020-01-02 15:16:08”
},
{
id:2，
类别识别号：1，
创建者id:1，
讲师编号：2，
难度：1，
身份证号码：1，
标题：“更新课程1”，
概述：“课程概述”，
已删除位置：null，
创建时间：“2020-01-02 15:18:40”，
更新地址：“2020-01-02 15:19:06”
},
{
id:3，
类别识别号：1，
创建者id:1，
讲师编号：1，
难度：1，
身份证号码：1，
标题：“hebaTest”，
概述：“课程概述”，
已删除位置：null，
创建时间：“2020-01-02 15:24:09”，
更新地址：“2020-01-02 15:24:09”
},
{
id:4，
类别识别号：2，
创建者id:1，
讲师编号：1，
难度：1，
身份证号码：1，
标题：“hebaTest”，
概述：“Adile”，
已删除位置：null，
创建时间：“2020-01-02 15:25:03”，
更新地址：“2020-01-02 15:25:03”
},
{
id:5，
类别识别号：2，
创建者id:1，
讲师编号：1，
难度：1，
身份证号码：1，
标题：“hebaTest”，
概述：“Adile”，
已删除位置：null，
创建时间：“2020-01-02 15:33:06”，
更新地址：“2020-01-02 15:33:06”
},
{
id:6，
类别识别号：1，
创建者id:1，
讲师编号：1，
难度：1，
身份证号码：1，
标题：“课程名称”，
概述：“课程概述”，
已删除位置：null，
创建时间：“2020-01-05 08:24:56”，
更新地址：“2020-01-05 08:24:56”
}
];
//将数据数组缩减为映射[element.id=>element]
const dataObject=data.reduce（（dataObject，item）=>{
数据对象[item.id]=项；
返回数据对象；
}, {});
console.log（数据对象）由于我没有看到任何嵌套或重复的数据结构，因此您的数据似乎已经以某种简化/规范化的形式出现。我认为数据上的一个简单数组：：reduce就足以满足您的需要

// Reduce data array to map [element.id => element]
const dataObject = data.reduce((dataObject, item) => {
  dataObject[item.id] = item;
  return dataObject;
}, {});


const数据=[
{
id:1，
类别识别号：1，
创建者id:1，
讲师编号：1，
难度：1，
身份证号码：1，
标题：“hebae”，
概述：“课程概述”，
已删除位置：null，
创建于：“2020-01-02 15:16:08”，
更新地址：“2020-01-02 15:16:08”
},
{
id:2，
类别识别号：1，
创建者id:1，
讲师编号：2，
难度：1，
身份证号码：1，
标题：“更新课程1”，
概述：“课程概述”，
已删除位置：null，
创建时间：“2020-01-02 15:18:40”，
更新地址：“2020-01-02 15:19:06”
},
{
id:3，
类别识别号：1，
创建者id:1，
讲师编号：1，
难度：1，
身份证号码：1，
标题：“hebaTest”，
概述：“课程概述”，
已删除位置：null，
创建时间：“2020-01-02 15:24:09”，
更新地址：“2020-01-02 15:24:09”
},
{
id:4，
类别识别号：2，
创建者id:1，
讲师编号：1，
难度：1，
身份证号码：1，
标题：“hebaTest”，
概述：“Adile”，
已删除位置：null，
创建时间：“2020-01-02 15:25:03”，
更新地址：“2020-01-02 15:25:03”
},
{
id:5，
类别识别号：2，
创建者id:1，
讲师编号：1，
难度：1，
身份证号码：1，
标题：“hebaTest”，
概述：“Adile”，
已删除位置：null，
创建时间：“2020-01-02 15:33:06”，
更新地址：“2020-01-02 15:33:06”
},
{
id:6，
类别识别号：1，
创建者id:1，
讲师编号：1，
难度：1，
身份证号码：1，
标题：“课程名称”，
概述：“课程概述”，
已删除位置：null，
创建时间：“2020-01-05 08:24:56”，
更新地址：“2020-01-05 08:24:56”
}
];
//将数据数组缩减为映射[element.id=>element]
const dataObject=data.reduce（（dataObject，item）=>{
数据对象[item.id]=项；
返回数据对象；
}, {});
console.log（数据对象）
对于任何对如何使用“normalizer”规范化此响应感兴趣的人，我找出了我的错误所在，
normalizer
通常在顶层查找和设置一个“id”键，如果找不到您必须提供它，在我的例子中，顶层对象上没有“id”，所以我给了它“peru page”作为一个让它工作的id

const dataSchema = new schema.Entity("data");
const coursesSchema = new schema.Entity( "info", 
{ 
    data: [dataSchema]
}, { idAttribute: "per_page" } );

const normalizedData = normalize(data, coursesSchema);

顺便说一下，@Drew Reese提供的“答案”在我得到的这种平面对象响应中更简单、更清晰

干杯：）
对于任何对如何使用“normalizer”规范化此响应感兴趣的人，我找出了我的错误所在，
normalizer
通常在顶层查找和设置一个“id”键，如果找不到您必须提供它，在我的情况下，顶层对象上没有“id”，所以我给了它“peru page”作为一个让它工作的id

const dataSchema = new schema.Entity("data");
const coursesSchema = new schema.Entity( "info", 
{ 
    data: [dataSchema]
}, { idAttribute: "per_page" } );

const normalizedData = normalize(data, coursesSchema);

顺便说一下，@Drew Reese提供的“答案”在我得到的这种平面对象响应中更简单、更清晰

干杯：）
上面的API响应似乎嵌套得不太深，需要额外的库来提取任何数据。向我们展示所需的输出数据示例，我很确定有一个简单的vanilla js解决方案可供建议。@YevgenGorbunkov我只需要与响应相同的结构，除了数据是一个对象而不是数组，这个对象的键是id，就像我在