通过两个数组反应映射而不重复

Question

我有一个问题，我必须制作一开始分成两半的表格，显示左侧和中间的 Id，然后在收到来自 api 请求的数据后，比较这两个数组并将差异标记为红色。实际上它部分工作得很好，所以它映射到 2 个数组，如果它发现任何差异，然后将其涂成红色，问题是它也复制了所有元素，并且在最终表格中多次出现相同的行。我知道这是因为我在另一个映射中映射数组，但我不知道如何解决这个问题。基本思想是：显示所有结果，不重复，并标记差异。我知道如何标记差异，但完全不知道如何不显示重复这里我发布了最小化的代码以便于阅读谢谢！

   const applicationsTable = (classes, current, compared) =>
  current.configuration.applications.map((el, i) => 
      compared &&
      compared.configuration.applications.map((comparedEl, i) => (

        <TableRow key={i}>
          <StyledFiledTableCell>
            <Typography variant="body2">
            {el.version}

            </Typography>
          </StyledFiledTableCell>

          <StyledFiledTableCell colSpan="5">
            <Typography variant="body2">{el.aid}</Typography>
          </StyledFiledTableCell>

          {el.aid == comparedEl.aid ? (
            <>
              <StyledFiledTableCell>
                <Typography variant="body2">
                {comparedEl.version}

                </Typography>
              </StyledFiledTableCell>

            </>
          ) : (
            <StyledFiledTableCell colSpan="5" />
          )}
        </TableRow>
      ))
    ) 

在这里我还发布了我的问题的照片，如您所见，表格中的元素是重复的

这里是我比较和当前数据的示例：

const current.configuration.applications = [
    {
      aid: "E82B0601040181C31F0201",
      lifeCycle: "SELECTABLE",
      version: null
    },
    {
      aid: "E82B0601040181C31F027F0301",
      lifeCycle: "SELECTABLE",
      version: null
    },
    {
      aid: "D2760001725041636301",
      lifeCycle: "SELECTABLE",
      version: null
    },
    {
      aid: "D276000172536F434D01",
      lifeCycle: "SELECTABLE",
      version: null
    },
  ]

  const compared.configuration.applications = [
    {
      aid: "E82B0601040181C31F0201",
      lifeCycle: "SELECTABLE",
      version: "03.02"
    },
    {
      aid: "D276000172536F434D01",
      lifeCycle: "SELECTABLE",
      version: "02.07"
    },
  ]

Answer 1

如果我正确理解您的要求，您希望在 compared 列表中显示相同应用程序 ID 的 version 值。如果我是对的，那么你实际上不需要两个.map() 函数，你需要的是一个.find() 方法：

const applicationsTable = (classes, current, compared) =>
  current.configuration.applications.map((el, i) => {
    const comparedEl = compared.configuration.applications.find(comparedEl => comparedEl.aid === el.aid);
    return (
      <TableRow key={i}>
        <StyledFiledTableCell>
          <Typography variant="body2">
            {el.version}
          </Typography>
        </StyledFiledTableCell>

        <StyledFiledTableCell colSpan="5">
          <Typography variant="body2">
            {el.aid}
          </Typography>
        </StyledFiledTableCell>

        {
          comparedEl ? (
          <>
            <StyledFiledTableCell>
              <Typography variant="body2">
                {comparedEl.version}
              </Typography>
            </StyledFiledTableCell>
          </>
          ) : (
          <StyledFiledTableCell colSpan="5" />
          )
        }
      </TableRow>
    );
  }
)

Answer 2

我不确定我是否完全理解您的问题。但如果您有这样的输入数据：

const current = { configuration: {} };
current.configuration.applications = [
    {
        aid: "1",
        lifeCycle: "SELECTABLE",
        version: null
    },
    {
        aid: "2",
        lifeCycle: "SELECTABLE",
        version: null
    },
    {
        aid: "3",
        lifeCycle: "SELECTABLE",
        version: null
    },
    {
        aid: "4",
        lifeCycle: "SELECTABLE",
        version: null
    },
];

const compared = { configuration: {} };
compared.configuration.applications = [
    {
        aid: "1",
        lifeCycle: "SELECTABLE",
        version: "03.02"
    },
    {
        aid: "4",
        lifeCycle: "SELECTABLE",
        version: "02.07"
    },
];

通过使用此代码，您将获得当前和比较的唯一值 + 重复值将被合并并由colorRed: true 标记

const merged = current.configuration.applications.map((item, index) => {
    if (compared) {
        const findCompared = compared.configuration.applications.find((e) => e.aid === item.aid, index);
        if (typeof findCompared !== "undefined") {
            return {
                ...item, ...findCompared, colorRed: true
            };
        }
    }
    return item;
});

那么结果数组会是这样的：

// merged =>
[
  {
    "aid": "1",
    "lifeCycle": "SELECTABLE",
    "version": "03.02",
    "colorRed": true
  },
  {
    "aid": "2",
    "lifeCycle": "SELECTABLE",
    "version": null
  },
  {
    "aid": "3",
    "lifeCycle": "SELECTABLE",
    "version": null
  },
  {
    "aid": "4",
    "lifeCycle": "SELECTABLE",
    "version": "02.07",
    "colorRed": true
  }
]

所以您只需通过.map() 浏览merged 并显示所有数据。

P.S.：我更改了“aid”以使示例更简单，但您可以将它与您的数据一起使用。

Answer 3

我认为您应该使用另一种方法，而不是在外循环中使用另一个 map()。 尝试使用 Array.prototype.find() 并给 map() 一个条件，如果你能找到一个 dup。