如何使用useParams获取React路由选中条目的对应正确数据

问题根因 #

1. 现有代码中过滤匹配id的filter逻辑被注释，所以会遍历全部条目渲染
2. useParams()返回的路由参数为字符串类型，若接口返回的closetItems中id为数字类型，直接用===判断会因类型不匹配导致过滤失效

可直接复用的修改后代码 #

const ExploreDetails = ({ closetItems, setClosetItems }) => {
  const { id } = useParams();
  // 对齐id类型后查找唯一匹配条目，find方法性能优于filter
  const targetItem = closetItems.find(item => item.id === Number(id));

  // 边界情况处理：避免数据未加载/id无效时页面报错
  if (!targetItem) return <div>数据加载中或对应条目不存在</div>;

  return (
    <div>
      <h2>Name: {targetItem.name}</h2>
      <h4>Category: {targetItem.email}</h4>
    </div>
  )
}

逻辑说明 #

• 因为id是条目唯一标识，用Array.find()匹配只需要遍历到符合条件的第一条就会终止，无需像filter一样遍历整个数组再map渲染，性能更优
• 若你接口返回的id本身为字符串类型，可删除Number()转换逻辑，直接写item.id === id即可

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