如何在JavaScript中保存商品颜色尺寸组合的输入数量为对象？

一、基础实现（扁平化对象存储） #

这种方式会生成一个以尺寸/颜色为键、输入值为对应值的扁平化对象，比如{ "BLUE/M": "10", "BLUE/XL": "5", ... }。

1. 初始化状态
   使用useState创建用于存储所有输入值的对象，提前遍历颜色和尺寸数组生成初始键值对：

   import { useState } from 'react';
   
   const YourComponent = () => {
     const colorArray = ['RED', 'BLUE'];
     const sizeArray = ['M', 'XL'];
   
     // 初始化空的数量映射对象
     const [quantityMap, setQuantityMap] = useState(() => {
       const initialMap = {};
       sizeArray.forEach(size => {
         colorArray.forEach(color => {
           const key = `${size}/${color}`;
           initialMap[key] = ''; // 初始值设为空字符串或0，根据需求调整
         });
       });
       return initialMap;
     });
   
     // ...后续代码
   };
   

2. 修改输入框渲染逻辑
   给每个输入框绑定对应的状态值，同时在onChange事件中更新指定键的值：

   {sizeArray.map((size) => 
     colorArray.map((color) => {
       const key = `${size}/${color}`;
       return (
         <input 
           key={key} // 必须添加唯一key，符合React列表渲染要求
           value={quantityMap[key]} // 受控组件，绑定状态值
           onChange={(e) => {
             // 浅拷贝原对象，更新当前键对应的值
             setQuantityMap(prev => ({
               ...prev,
               [key]: e.target.value
             }));
           }} 
           placeholder={key}
         />
       );
     })
   )}
   

二、嵌套对象存储（可选） #

如果需要更结构化的嵌套对象（比如{ BLUE: { M: "", XL: "" }, RED: { M: "", XL: "" } }），可以调整状态结构：

1. 初始化嵌套状态

   const [quantityMap, setQuantityMap] = useState(() => {
     const initialMap = {};
     colorArray.forEach(color => {
       initialMap[color] = {};
       sizeArray.forEach(size => {
         initialMap[color][size] = '';
       });
     });
     return initialMap;
   });
   

2. 更新输入框的绑定逻辑

   {sizeArray.map((size) => 
     colorArray.map((color) => {
       return (
         <input 
           key={`${size}-${color}`}
           value={quantityMap[color][size]}
           onChange={(e) => {
             setQuantityMap(prev => ({
               ...prev,
               [color]: {
                 ...prev[color],
                 [size]: e.target.value
               }
             }));
           }} 
           placeholder={`${size}/${color}`}
         />
       );
     })
   )}
   

最终效果 #

无论哪种方式，用户输入后quantityMap都会实时同步所有输入框的值，直接使用这个对象即可完成数据保存或提交操作。

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