MERN电商项目：无法通过URLSearchParams获取qty参数添加至购物车

问题背景 #

我在学习Brad Traversy的旧版MERN电商课程，课程里处理URL参数的旧代码存在不少bug。我需要从类似localhost:3000/id/?qty=1的URL中获取qty参数值作为添加到购物车的商品数量，默认值设为1。尝试用URLSearchParams实现但没成功，附上相关代码求简单修复方案。

课程旧代码（存在bug） #

const qty = location.search ? Number(location.search.split('=')[1]) : 1

旧代码问题：直接按=分割，一旦URL里有多个参数（比如?qty=2&color=red）就会出错，而且未做参数合法性校验，非法值会导致异常。

我的错误代码 #

const queryParams = new URLSearchParams(window.location.search);
const qty = queryParams ? Number(queryParams.get('qty').split('=')[1]) : 1;

错误原因：queryParams.get('qty')已经直接返回参数值，无需再用split('=')分割；如果qty参数不存在，get('qty')会返回null，调用split会直接报错。

修复方案 #

直接通过URLSearchParams.get()获取参数值，同时做合法性校验（确保是有效正整数），默认值设为1：

const queryParams = new URLSearchParams(window.location.search);
// 先获取qty参数并转成数字，判断是否为有效正整数，否则用默认值1
const qty = !isNaN(Number(queryParams.get('qty'))) && Number(queryParams.get('qty')) >= 1 
  ? Number(queryParams.get('qty')) 
  : 1;

修复后的完整CartScreen.js代码 #

import React, { useEffect } from 'react';
import { Link, useNavigate, useParams, useLocation } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import {
  Row,
  Col,
  ListGroup,
  Image,
  Form,
  Button,
  Card,
} from 'react-bootstrap';
import Message from '../components/Message';
import { addToCart } from '../actions/cartActions';

const CartScreen = () => {
  const navigate = useNavigate();
  const queryParams = new URLSearchParams(window.location.search);
  // 修复后的qty获取逻辑
  const qty = !isNaN(Number(queryParams.get('qty'))) && Number(queryParams.get('qty')) >= 1 
    ? Number(queryParams.get('qty')) 
    : 1;

  const { id } = useParams();
  const productId = id;

  const dispatch = useDispatch();
  useEffect(() => {
    if (productId) {
      dispatch(addToCart(productId, qty));
    }
  }, [dispatch, productId, qty]);

  return <div>CartScreen</div>;
};

export default CartScreen;

逻辑说明 #

1. URLSearchParams.get('qty')会直接返回qty参数的字符串值，参数不存在时返回null
2. 用!isNaN(Number(...))判断转成数字后是否有效，同时确保数量是不小于1的正整数，避免非法值（比如负数、0、非数字字符串）
3. 支持URL存在多个参数的场景，逻辑更健壮

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