React中useParams获取的路由id与Redux存储数据比对始终返回NULL问题

问题1解决方法 #

原因：useParams()返回的所有路由参数默认都是字符串类型，你后端返回的perfume.id是数字类型，===严格相等判断会同时校验值和类型，类型不一致时直接返回false，因此匹配失败。
修改方案：将路由获取的id显式转换为数字类型后再做比对，可增加容错逻辑避免非法id报错：

const params = useParams()
// 显式转数字，非法值默认设为0/你需要的默认值
const id = isNaN(Number(params.id)) ? 0 : Number(params.id);

问题2解决方法 #

原因：Array.filter()的设计逻辑是返回所有符合条件的元素组成的数组，哪怕只有1个匹配项也会包裹为数组返回，符合该API的预期行为。
修改方案：使用专门用于查找单个匹配元素的Array.find()方法，该方法会直接返回第一个符合条件的元素本身，无匹配项时返回undefined：

// 替换原filter代码
const result = state.find(obj => obj.id === id)

额外优化建议 #

你当前直接用store.getState()给本地useState赋值的写法存在问题：只有组件第一次初始化时会读取一次redux中的数据，后续redux里perfumes更新时，组件本地的state不会同步更新，会导致匹配结果不准。建议改用useSelector订阅redux状态，不需要额外存本地state：

import { useSelector } from 'react-redux'

// 组件内直接获取实时的perfumes数据
const perfumes = useSelector(store => store.perfumeState.perfumes)
// 直接用该数组做匹配即可
const result = perfumes.find(obj => obj.id === id)

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