无法在两个嵌套的 arrays 之间进行交集

Question

我正在使翻译动态化，但是当我必须从另一个数组中显示相应的 object 时，我在这方面很挣扎。

我有两个 arrays，它们具有相同的 model，我想要做的是，当我搜索翻译时，我还想显示其他语言的相应翻译。

目前，我只能显示您正在搜索的那个。

例如：如果我搜索句子你确定吗？ ，除了你确定吗？ 句子，它还应该显示来自其他列语言的相应句子。

这是一个带有示例的片段： https://codesandbox.io/s/poliished-smoke-n6w6i?file=/src/App.js

任何帮助将不胜感激。 先感谢您！

Answer 1

逻辑是通过它们的id而不是它们的值来过滤选定的语言项。 id取自默认语言项。

这是如何

const searchByresourceId = (targetLng, selectedResources) => {
  // get the default language item id
  const ids = selectedResources.map(({languageResources}) => languageResources.map(({id}) => id)).flat();

  return targetLng
    ?.map((item) => {
      const languageResources = item.languageResources.filter(
        (namespace) =>
          ids.includes(namespace.id)
      );
      return {
        ...item,
        languageResources
      };
    })
    .filter((item) => item.languageResources.length > 0);
}

Ans你应该改变你设置state的方式

const searchByresourceId = (targetLng, selectedResources) => {
  const ids = selectedResources.map(({languageResources}) => languageResources.map(({id}) => id)).flat();
  return targetLng
    ?.map((item) => {
      const languageResources = item.languageResources.filter(
        (namespace) =>
          ids.includes(namespace.id)
      );
      return {
        ...item,
        languageResources
      };
    })
    .filter((item) => item.languageResources.length > 0);
}

https://codesandbox.io/s/cranky-ellis-ccdhx?file=/src/App.js

代码当然没有优化，我只是演示了逻辑