React组件中如何根据选择选项动态更新瓦数映射与计算？

1. 调整组件状态结构 #

需要存储每个电器的选中类型和数量，替换原有的summary状态，确保能追踪用户的选择：

// 从参考JSON动态生成初始状态，避免硬编码
const initialApplianceData = appliances.appliances.reduce((acc, appliance) => {
  acc[appliance.name] = { type: "", quantity: 0 };
  return acc;
}, {});

const [applianceData, setApplianceData] = useState(initialApplianceData);

2. 修改输入控件为受控组件并更新事件逻辑 #

给输入框添加区分字段的name属性，绑定控件值到状态，同时更新事件处理函数以区分类型和数量的变更：

{appliances.appliances.map((appliance) => {
  const { name, options } = appliance;
  const applianceTypes = options.map(opt => opt.option);
  const currentData = applianceData[name];

  return (
    <div key={name}>
      <select
        name={`${name}-type`}
        id={name}
        className="p-1 border-2 border-gray-400 rounded-md ml-2 text-xs"
        value={currentData.type}
        onChange={handleInputChange}
      >
        <option value="">Please Select {name} Type</option>
        {applianceTypes.map((type) => (
          <option key={type} value={type}>
            {type}
          </option>
        ))}
      </select>
      <input
        type="number"
        name={`${name}-quantity`}
        placeholder={`Enter ${name} Quantity`}
        min={0}
        className="p-1 border-2 border-gray-400 rounded-md ml-2 text-xs"
        value={currentData.quantity}
        onChange={handleInputChange}
      />
    </div>
  );
})}

// 统一处理类型选择和数量输入的变更
const handleInputChange = (e) => {
  const { name, value } = e.target;
  const [applianceName, fieldType] = name.split("-");
  
  setApplianceData(prev => ({
    ...prev,
    [applianceName]: {
      ...prev[applianceName],
      [fieldType]: fieldType === "quantity" ? parseInt(value) || 0 : value
    }
  }));
};

3. 动态计算选中类型的对应瓦数 #

不再硬编码options[0]，而是根据用户选中的类型匹配对应瓦数：

{Object.entries(applianceData).map(([applianceName, { type, quantity }]) => {
  // 未选择类型或数量为0时不显示计算结果
  if (!type || quantity === 0) return null;
  
  const appliance = appliances.appliances.find(a => a.name === applianceName);
  const selectedOption = appliance.options.find(opt => opt.option === type);
  const totalWattage = quantity * selectedOption.wattage;

  return (
    <p key={applianceName} className="text-sm">
      {totalWattage}w
    </p>
  );
})}

额外优化建议 #

• 添加类型选择校验：用户未选择电器类型时，可在计算区域提示补充选择
• 优化空值处理：当用户清空数量输入时，自动重置为0

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