ReactJS：如何按指定数组顺序映射并重复渲染DisplayCard

• 现有React代码通过遍历database数组渲染DisplayCard组件，仅能显示3个组件，但需求是按照order数组的顺序渲染6次组件
• 要求不修改DisplayCard组件（该组件在多处使用）
• 自行尝试的map写法报错，提供了最小可复现代码

相关数据与代码 #

order数组 #

[ "567", "645", "852", "645", "852", "852", ]

database数组 #

[ 
  { "userId": 567, "userName": "tjk23", "department": "Sales", "remarks": "" }, 
  { "userId": 645, "userName": "gfn23", "department": "Sales", "remarks": "" }, 
  { "userId": 852, "userName": "dan24", "department": "Sales", "remarks": "" } 
]

原有渲染代码 #

{database.map((data, index) => { return <DisplayCard data={data} key={index}/> })}

尝试的错误代码 #

{order.map((database.data, index) => { return <DisplayCard data={database.data} key={index}/> })}

修复后的实现方案 #

核心思路是先把database转换成以userId为键的映射对象，快速根据order里的ID匹配对应数据，再遍历order数组渲染组件。修复后的完整代码如下：

export function Minimal() {
    const order = [ "567", "645", "852", "645", "852", "852", ];
    const database = [ 
      { "userId": 567, "userName": "tjk23", "department": "Sales", "remarks": "" }, 
      { "userId": 645, "userName": "gfn23", "department": "Sales", "remarks": "" }, 
      { "userId": 852, "userName": "dan24", "department": "Sales", "remarks": "" } 
    ];
    
    // 创建userId到用户数据的映射，注意把数字userId转成字符串匹配order里的格式
    const lookup = Object.fromEntries(database.map(o => [o.userId.toString(), o]));
    
    function DisplayCard({data}) {
        return <div>{data.userId}</div>;
      }

    return (
        <>
            {database?.length > 0 ? (
                <>
                    {order.map((userId, index) => {
                        // 用index+userId作为key，避免重复ID导致的组件复用问题
                        return <DisplayCard data={lookup[userId]} key={`${index}-${userId}`} />
                    })}
                </>
            ) : (
                <div className="empty">
                    <h2>No records found</h2>
                </div>
            )}
        </>
    )
}

关键修改说明 #

1. 创建映射对象：解决order和database中ID类型不一致的问题（order是字符串，database是数字），转换后能快速匹配数据
2. 修复语法错误：原代码在三元表达式中直接赋值后接括号，不符合JS语法，调整为提前创建映射再使用
3. 优化key值：使用index+userId作为组件key，比单纯用index更稳妥，避免重复渲染时的组件状态异常

内容的提问来源于stack exchange，提问作者wynnawinner