React香水商城项目：路由传id查询Redux数据返回不匹配对象问题

问题原因 #

• useParams()返回的所有参数默认是字符串类型，你拿到的id和Redux中存储的香水id类型不匹配，直接用作索引取值时会出现隐式类型转换错误。
• 你当前直接将id作为perfumes数组的下标取值，而不是查询数组中id属性和参数id相等的项。数组下标是从0开始的连续数值，和你业务数据里的id字段没有必然对应关系，比如下标为1的元素的id字段可能是2，自然会出现匹配错误的问题。
• 直接调用store.getState()取值没有使用Redux官方提供的useSelectorHook，Redux中的数据更新时组件无法自动响应，会出现数据不同步的问题。
• 如果你直接在组件顶层执行setState赋值操作，组件每次渲染都会触发状态更新，可能导致死循环或者拿到旧渲染批次的错误数据。

修复方案 #

1. 类型对齐+用useSelector取响应式Redux数据 #

import { useSelector } from 'react-redux';

// 组件内代码
const params = useParams()
// 把路由拿到的字符串id转成数字，和你业务数据里的id类型保持一致
const targetId = Number(params.id);
// 用useSelector取Redux中的香水列表，数据更新时组件会自动重新渲染
const perfumes = useSelector((state: any) => state.perfumeState.perfumes);
const [currentPerfume, setCurrentPerfume] = useState<any>(null);

2. 用find方法精准匹配id一致的商品 #

将setState操作放到useEffect中，只有依赖项变化时才重新查询匹配：

import { useEffect } from 'react';

// ...
useEffect(() => {
  // 容错判断：id转换异常时直接返回，可自行补充跳转404的逻辑
  if (isNaN(targetId)) return;
  // 遍历数组匹配id相等的项，不要直接用下标取值
  const matchedPerfume = perfumes.find(item => item.id === targetId);
  setCurrentPerfume(matchedPerfume || {});
}, [perfumes, targetId])

后续直接使用currentPerfume变量渲染详情即可。

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