javascript - 无法在两个嵌套数组之间进行交集

Question

我正在使翻译动态化，但是当我必须从另一个数组中显示相应的对象时，我在这部分苦苦挣扎。
我有两个具有相同模型的数组，我想做的是，当我搜索翻译时，我还想显示另一种语言的相应翻译。
目前，我只能显示您正在搜索的那个。
例如:如果我搜索句子 Are you sure?，除了 Are you sure?句子，它还应该显示来自其他列语言的相应句子。
这是一个带有示例的片段:https://codesandbox.io/s/polished-smoke-n6w6i?file=/src/App.js
任何帮助将不胜感激。
先感谢您!

Answer 1

逻辑是通过它们的过滤选择的语言项。编号 ，而不是他们的值(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);
}

Ans 你应该改变你设置状态的方式

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
代码当然没有优化，我只是演示了逻辑