在 React 状态下保持更新的对象关系

Question

我想弄明白，我应该如何正确地为 React 组件状态创建 JSON 模型。因为现在我总是使用 Entity Framework 和虚拟属性来连接相关的 "tables"，所以现在当我想在 React 和 JSON 中做类似的事情时，我真的不知道如何进行。

这是我的简化模型：

{
  "myModel": {
    "Categories": [
      {
        "Id": 1,
        "Name": "Cat1",
        "Active": true
      },
      {
        "Id": 2,
        "Name": "Cat2",
        "Active": false
      }
    ],
    "Components": [
      {
        "Id": 1,
        "Name": "Component1",
        "CategoryId": 1
      },
      {
        "Id": 2,
        "Name": "Component2",
        "CategoryId": 1
      },
      {
        "Id": 3,
        "Name": "Component3",
        "CategoryId": 2
      }
    ]
  }
}

如何有效加入这两个"tables"？例如，如果我想过滤 Components，其 Category 是 Active?

在我的第二种方法中，我更改了模型以在组件中包含整个类别对象：

..."Components": [
 {
   "Id": 1,
   "Name": "Component1",
   "Category": {
        "Id": 1,
        "Name": "Cat1",
        "Active": true
      }
 },...

这让我可以非常轻松地使用 filter(a=>a.Category.Active==true) 函数，但问题是当我对 Categories 之一的属性进行更改时，更改不会反映出来至 Components.

在这种情况下最好的方法是什么？每次 Category 更改时更新所有 Component[].Category 还是循环遍历所有类别以在每次我需要过滤或分组 CategoryId 上的组件时找到正确的类别更好？

我需要将 Categories 放在单独的数组中，因为它们并不总是被 Components 使用。

Answer 1

您应该查看 redux 文档。你不应该复制数据并尽可能保持平坦。所以你的第二种方法是不可取的，因为它既复制又嵌套数据。组件应该插入到一个对象中，其中键是 id。此外，您可以将所有活动组件保存在一个字符串数组中，该数组包含所有活动组件 ID，并通过遍历活动组件数组并从映射对象中提取具有该 ID 的组件来检索它们。

Answer 2

您可以使用您的数据结构轻松聚合数据并过滤活动组件：

  const activeComponents = myModel.Components.filter(component => {
    let isActive = false;
    const componentCategory = myModel.Categories.filter(
      category => category.Id === component.CategoryId
    );
    if (componentCategory.length && componentCategory[0].Active)
      isActive = true;
    return isActive;
  });

如果每个 CategoryId 始终有一个类别，您也可以缩短代码：

  const activeComponents = myModel.Components.filter(
    component =>
      myModel.Categories.filter(
        category => category.Id === component.CategoryId
      )[0].Active
  );

在 React 状态下保持更新的对象关系

Keeping updated objects relations in React state

javascript

json

relation

reactjs