javascript - React js 迭代组件 props 中的数组

Question

我有一个需要传递数据的组件，在数组中搜索。数组存储在变量中，数据需要转到 Component 属性。考虑以下因素；

const users = [
   {"id": 1, "username": 'name1'},
   {"id": 2, "username": 'name2'},
   {"id": 3, "username": 'name3'},
   {"id": 4, "username": 'name4'},
   {"id": 5, "username": 'name5'}
]

const listItemData = [1,2,3];

<List
    size="small"
    bordered
    dataSource={listItemData}
    renderItem={item => <List.Item>{item}</List.Item>}//need name1, name2, name3 but get 1,2,3 here
/>

所以这里我有一个用户数组，其中存储了所有用户的所有数据，以及一个只有 id 的特定列表项数组。出于渲染目的，我需要渲染用户名而不是 ID。据我所知，我可以迭代组件 renderItem 属性中的用户 id，并显示将其 id 与 listItemData 中的 id 相匹配的用户的 username。

欢迎任何关于如何做到这一点的想法。谢谢您

Answer 1

const users = [
  {"id": 1, "username": 'name1'},
  {"id": 2, "username": 'name2'},
  {"id": 3, "username": 'name3'},
  {"id": 4, "username": 'name4'},
  {"id": 5, "username": 'name5'}
];

const ids = [1,2,3];

const listItems = users.reduce((a, c) => {
  a[c.id] = c.username;
  return a;
}, {});

<List
  size="small"
  bordered
  dataSource={ids}
  renderItem={id => <List.Item>{listItems[id]}</List.Item>}
/>