React电商项目使用Array.find()无法匹配获取对应商品问题求助

问题原因 #

代码的核心问题是数据类型不匹配：

• 从useParams()中获取的productId是字符串类型（路由参数默认均为字符串格式）
• Redux store中存储的商品id是数字类型
  使用===严格相等运算符判断时会同时校验值和类型，二者类型不一致自然无法匹配到对应商品。

修复方案 #

修改ProductDetail.jsx中find方法的判断逻辑，将路由取到的productId转为数字类型后再做匹配即可：

// 修改前
// const newProduct = products.find((product) => product.id === productId);
// 修改后
const newProduct = products.find((product) => product.id === Number(productId));

可选优化建议 #

当前路由配置存在路由冲突风险：

<Route path="/:productId" component={ProductDetail} />

该配置会把根路径下所有一级路由都匹配为商品id，比如后续要加/about、/contact这类页面都会被误判为productId进入商品详情页。建议给商品详情页路由加专属前缀：

<Route path="/product/:productId" component={ProductDetail} />

对应的商品跳转链接同步修改为/product/xxx格式即可。

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