如何将数组中与URL参数randomName匹配的元素优先排序展示？

你可以通过拆分合并数组或者排序两种方式实现匹配元素优先渲染的需求：

方法一：拆分后合并数组 #

先把数组中name匹配randomName的元素和不匹配的元素分开，再将匹配的数组放在前面合并，最后渲染合并后的新数组：

import { useParams } from 'react-router-dom';

const YourComponent = () => {
  const { randomName } = useParams();
  // randomName = "ASD"

  const example = [
    {name:"bcd", size:32}, 
    {name:"ASD", size:32}, 
    {name:"ASD", size:32}, 
    {name:"scd", size:32}, 
    {name:"lgh", size:32}
  ];

  // 拆分匹配和不匹配的元素
  const matchedItems = example.filter(item => item.name === randomName);
  const unmatchedItems = example.filter(item => item.name !== randomName);
  // 合并数组：匹配元素在前
  const sortedExample = [...matchedItems, ...unmatchedItems];

  return (
    <>
      {sortedExample.map((x, index) => (
        <div key={index}> {x.name} {index + 1} </div>
      ))}
    </>
  );
};

export default YourComponent;

方法二：使用数组排序 #

通过Array.sort()给匹配元素设置更高优先级，让它们排在数组前面：

import { useParams } from 'react-router-dom';

const YourComponent = () => {
  const { randomName } = useParams();
  // randomName = "ASD"

  const example = [
    {name:"bcd", size:32}, 
    {name:"ASD", size:32}, 
    {name:"ASD", size:32}, 
    {name:"scd", size:32}, 
    {name:"lgh", size:32}
  ];

  // 排序：匹配元素排前面
  const sortedExample = [...example].sort((a, b) => {
    const aMatched = a.name === randomName;
    const bMatched = b.name === randomName;
    // 如果a匹配b不匹配，a排前面；反之b排前面；都匹配或都不匹配则保持原顺序
    if (aMatched && !bMatched) return -1;
    if (!aMatched && bMatched) return 1;
    return 0;
  });

  return (
    <>
      {sortedExample.map((x, index) => (
        <div key={index}> {x.name} {index + 1} </div>
      ))}
    </>
  );
};

export default YourComponent;

说明 #

• 拆分合并的方式逻辑更直观，排序方式则更简洁，两种方法都能实现需求。
• 注意给map生成的元素加上key属性，示例中用index是简易方案，实际项目中如果有唯一ID，建议用ID作为key以提升渲染性能。
• 示例中渲染的数字是新数组的索引+1，和你期望的输出一致；如果需要保留原数组的索引，可在拆分或排序前给每个元素添加originalIndex字段存储原索引。

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