反应js迭代组件道具中的数组

Question

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

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 匹配的用户 username 与来自 listItemData 的 ID。

欢迎任何想法如何做到这一点。谢谢你

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>}
/>

Answer 2

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { List, Avatar } from 'antd';

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];


const data = users.filter((user)=>listItemData.includes(user.id))
ReactDOM.render(
  <List
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
      <List.Item>
        <List.Item.Meta          
          title={<a href="https://ant.design">{item.username}</a>}          
        />
      </List.Item>
    )}
  />,
  document.getElementById('container'),
);

您需要过滤掉这些值，然后将其设置为新数据源。顺便说一句，您在代码中采用了错误的数据源。首先过滤掉匹配的数据，然后它就像一个魅力！！！