在不同的数组映射中将不同的对象与id字段进行匹配

Question

我想映射 X 数组并返回一个组件。该组件有一个字符串 prop，但不在同一个数组中。我想在对象 Y 数组中找到与 X.symbolId 匹配的

const X = [
{
id: 1,
symbolId: 2,
},
{
id: 2,
symbolId: 3,
},
{
id: 3,
symbolId: 3,
},
{
id: 3,
symbolId: 2,
},
]

const Y = [
{
id: 1,
symbol: "USD",
name: "Dollar",
},
{
id: 2,
symbol: "EUR",
name: "Euro"
},
{
id: 3,
symbol: "GLD",
name: "Gold"
}
]

我有这个 2 数组。我想映射 X 并找到带有 symbolID 的 Y 对象。

X.map((a)=> {
return (
<Text>{Y.find((b) => b.id === a.symbolId).name}</Text>
)
})

我所期望的是；

<Text>Euro</Text>
<Text>Gold</Text>
<Text>Gold</Text>
<Text>Euro</Text>

但是 find 方法只控制第一个对象，并为其他对象返回 undefined 。有什么不同的方法吗？

Answer 1

您可以使用map()和find()来执行此操作，但处理返回未定义的情况

const X = [
  {
    id: 1,
    symbolId: 2,
  },
  {
    id: 2,
    symbolId: 3,
  },
  {
    id: 3,
    symbolId: 3,
  },
  {
    id: 4,
    symbolId: 2,
  },
];

const Y = [
  {
    id: 1,
    symbol: "USD",
    name: "Dollar",
  },
  {
    id: 2,
    symbol: "EUR",
    name: "Euro",
  },
  {
    id: 3,
    symbol: "GLD",
    name: "Gold",
  },
];

const result = X.map((a) => {
  const foundSymbol = Y.find((b) => b.id === a.symbolId);
  return foundSymbol ? <Text>{foundSymbol.name}</Text> : null;
});

console.log(result);