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

Question

我正在使翻译动态化，但是当我必须显示另一个数组中的相应对象时，我在这部分中挣扎。

我有两个具有相同模型的数组，我想做的是，当我搜索翻译时，我还想显示其他语言的相应翻译。

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

例如：如果我搜索句子 Are you sure?，除了 Are you sure? 句子之外，它还应该显示另一列中的相应句子语言。

这是一个带有示例的 sn-p：https://codesandbox.io/s/polished-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);
}

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

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

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