无法在两个嵌套数组之间进行交集操作。

Question

我正在使翻译动态化，但在展示另一个数组中的相应对象时遇到了困难。

我有两个具有相同模型的数组，我想做的是，在搜索翻译时，还要显示另一种语言的相应翻译。

目前，我只能显示您正在搜索的翻译。

例如：如果我搜索句子Are you sure?，除了Are you sure?句子，它还应该显示来自其他列语言的相应句子。

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

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

- Teuta Koraqi

---

国际化并不是一项容易的任务。最终，您将遇到复杂的问题，例如正确处理可能具有多个复数形式的语言的复数。使用一些i18n库，例如formatJS。 - szaman

@szaman，感谢您的回复！是的，我正在使用react-i18next库，但这不是为了那个，它只是为了我们的资源，我们想从管理面板中管理这些资源。因此，我们从后端获取所有本地化内容，我们没有在react应用程序中保存文件。 - Teuta Koraqi

Answer 1

逻辑是通过它们的id而不是它们的value来过滤所选语言项。 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);
}

你应该改变如何设置状态

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

这段代码当然没有进行优化，我只是演示了逻辑。

- Mosh Feu

---

非常感谢您的努力！这正是我正在寻找的，但是还有另一个问题，因为目前您只能搜索英文，当我需要搜索其他语言时该怎么办？我该如何将它们合并在一起？@mosh - Teuta Koraqi

我能想到的逻辑是将“搜索”部分与“查看”部分分开。“搜索部分”-在所有资源中搜索术语并获取ID。“查看”部分（2）通过ID列表过滤默认和选定的语言资源。你可以尝试实现它。如果需要更多帮助，我会尽力腾出时间。 - Mosh Feu

很高兴听到这个好消息 :) 不过我想知道它是否按预期工作。如果我输入 A je i sigurt?，我只能在右侧列表中看到一个项目。这样可以吗？ - Mosh Feu

是的，就像这样（代码可以更漂亮和更短，但原则是我想表达的。我还会将 searchByresourceId = (targetLng, selectedResources) 更改为 searchByresourceId = (languages, selectedResources)，因为这个参数不再是目标语言。 - Mosh Feu

当然，没问题 :) - Mosh Feu