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

我认为您应该使用其他方法，而不是在外循环中使用另一个map（）。如果可以找到dup，请尝试使用Array.prototype.find（）并给map（）一个条件。

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
  }
]

因此，您只能通过merged浏览.map()并显示所有数据。

附注：我更改了“帮助”以简化示例，但您可以将其与数据一起使用。

Answer 3

如果我正确理解了您的要求，那么您想在version列表上显示相同应用程序ID的compared值。如果我是对的，那么您实际上不需要两个.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>
    );
  }
)

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

3 个答案: