[英]Cannot make intersection between two nested arrays
I'm making translations dynamic, but I'm struggling in the part when I have to show the corresponding object from the other array.我正在使翻译动态化,但是当我必须从另一个数组中显示相应的 object 时,我在这方面很挣扎。
I have two arrays, which have the same model, and what I'm trying to do is, when I search for a translation, I want to show also the corresponding translation from the other language.我有两个 arrays,它们具有相同的 model,我想要做的是,当我搜索翻译时,我还想显示其他语言的相应翻译。
For the moment, I can only show the one that you are searching for.目前,我只能显示您正在搜索的那个。
For example: If I search for the sentence Are you sure?例如:如果我搜索句子你确定吗? , besides the Are you sure?
,除了你确定吗? sentence, it should show also the corresponding sentence from the other column language.
句子,它还应该显示来自其他列语言的相应句子。
Here is a snippet with an example: https://codesandbox.io/s/polished-smoke-n6w6i?file=/src/App.js这是一个带有示例的片段: https://codesandbox.io/s/poliished-smoke-n6w6i?file=/src/App.js
Any help would be very appreciated.任何帮助将不胜感激。 Thank you in advance!
先感谢您!
The logic is to filter the selected language items by their id , not by their value .逻辑是通过它们的id而不是它们的值来过滤选定的语言项。 The
id
is taken from the default language items. id
取自默认语言项。
This is how这是如何
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 you should change how you set the state 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.jshttps://codesandbox.io/s/cranky-ellis-ccdhx?file=/src/App.js
The code is not optimized of course, I just demonstrated the logic代码当然没有优化,我只是演示了逻辑
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.