React票务选择组件修复Range error及移除0选项需求

以下是修复后的完整代码，可解决你提到的两个问题：

import { useState } from "react";

const Dropdown = () => {
  const [numTickets, setNumTickets] = useState(0);
  const [selectedValues, setSelectedValues] = useState({
    adultNonVeg: 0,
    childNonVeg: 0,
    adultVeg: 0,
    childVeg: 0,
  });

  function handleChange(event, name) {
    const value = Number(event.target.value);
    setSelectedValues({ ...selectedValues, [name]: value });
  }

  // 计算当前类型的最大可用票数
  const calculateMaxAvailable = (excludeKey) => {
    const totalSelected = Object.entries(selectedValues).reduce((sum, [key, val]) => {
      if (key !== excludeKey) sum += val;
      return sum;
    }, 0);
    // 确保可用票数非负，避免无效数组长度
    return Math.max(0, Number(numTickets) - totalSelected);
  };

  return (
    <div>
      <label>
        Number of tickets:
        <input
          type="number"
          value={numTickets}
          onChange={(event) => setNumTickets(Number(event.target.value))}
          min="0"
        />
      </label>
      <br />
      <label>
        Adult Non-Veg:
        <select
          value={selectedValues.adultNonVeg}
          onChange={(event) => handleChange(event, "adultNonVeg")}
        >
          {Array.from({ length: calculateMaxAvailable("adultNonVeg") }, (_, i) => (
            <option key={i + 1} value={i + 1}>
              {i + 1}
            </option>
          ))}
        </select>
      </label>
      <br />
      <label>
        Child Non-Veg:
        <select
          value={selectedValues.childNonVeg}
          onChange={(event) => handleChange(event, "childNonVeg")}
        >
          {Array.from({ length: calculateMaxAvailable("childNonVeg") }, (_, i) => (
            <option key={i + 1} value={i + 1}>
              {i + 1}
            </option>
          ))}
        </select>
      </label>
      <br />
      <label>
        Adult Veg:
        <select
          value={selectedValues.adultVeg}
          onChange={(event) => handleChange(event, "adultVeg")}
        >
          {Array.from({ length: calculateMaxAvailable("adultVeg") }, (_, i) => (
            <option key={i + 1} value={i + 1}>
              {i + 1}
            </option>
          ))}
        </select>
      </label>
      <br />
      <label>
        Child Veg:
        <select
          value={selectedValues.childVeg}
          onChange={(event) => handleChange(event, "childVeg")}
        >
          {Array.from({ length: calculateMaxAvailable("childVeg") }, (_, i) => (
            <option key={i + 1} value={i + 1}>
              {i + 1}
            </option>
          ))}
        </select>
      </label>
    </div>
  );
};

export default Dropdown;

问题1：输入票数为0时的Range Error修复 #

• 原问题根源：numTickets默认是字符串类型，计算数组长度时可能得到负数或无效值，导致Array()构造函数报错；同时未处理可用票数为负的情况。
• 修复细节：
  1. 将输入框的numTickets转为数字类型存储，避免字符串拼接导致的计算错误。
  2. 新增calculateMaxAvailable函数统一计算可用票数，用Math.max(0, ...)确保结果非负，杜绝无效数组长度。
  3. 使用Array.from替代[...Array()]，写法更清晰且兼容性更好。

问题2：下拉选项从1开始，隐藏0选项 #

• 原问题根源：循环直接使用i作为选项值，从0开始生成选项。
• 修复细节：
  1. 调整数组长度为calculateMaxAvailable的返回值（即1到最大可用数的总个数）。
  2. 循环中用i+1作为选项的value和显示文本，确保选项从1开始。
  3. 把handleChange中获取的选中值转为数字，避免类型不一致引发的计算问题。

内容的提问来源于stack exchange，提问作者prabahar.L