Next.js电商产品表单：嵌套数组中useState更新颜色字段失败

你的核心问题是没有指定要添加颜色的目标size条目，原代码错误地尝试给sizes数组新增元素，而非修改已有size的colors数组，且product.sizes是数组，不存在colors属性，导致操作失败。

正确实现方案 #

1. 修改handleAddColors函数 #

需要传入目标size的索引，精准定位要修改的size项，再更新其colors数组：

const handleAddColors = (sizeIndex) => {
  // 深层复制product对象，避免直接修改原状态
  const productCopy = JSON.parse(JSON.stringify(product));
  
  // 给指定索引的size添加新颜色项（生成唯一id避免冲突）
  productCopy.sizes[sizeIndex].colors.push({ 
    id: Date.now().toString(),
    color: "", 
    stock: 0 
  });
  
  setProduct(productCopy);
};

2. 渲染时的调用方式 #

在每个size对应的操作区域，传递当前size的索引，绑定添加按钮的点击事件：

{product.sizes.map((size, index) => (
  <div key={size.id || index}>
    {/* 尺寸输入框 */}
    <input 
      type="text" 
      value={size.size} 
      onChange={(e) => {
        const copy = JSON.parse(JSON.stringify(product));
        copy.sizes[index].size = e.target.value;
        setProduct(copy);
      }} 
      placeholder="输入尺寸"
    />
    
    {/* 颜色与库存列表 */}
    {size.colors.map((color, colorIndex) => (
      <div key={color.id || colorIndex} style={{marginTop: '8px'}}>
        <input 
          type="text" 
          value={color.color} 
          onChange={(e) => {
            const copy = JSON.parse(JSON.stringify(product));
            copy.sizes[index].colors[colorIndex].color = e.target.value;
            setProduct(copy);
          }} 
          placeholder="颜色"
        />
        <input 
          type="number" 
          value={color.stock} 
          onChange={(e) => {
            const copy = JSON.parse(JSON.stringify(product));
            copy.sizes[index].colors[colorIndex].stock = parseInt(e.target.value) || 0;
            setProduct(copy);
          }} 
          placeholder="库存"
          style={{marginLeft: '8px'}}
        />
      </div>
    ))}
    
    {/* 添加颜色按钮，传递当前size的索引 */}
    <button onClick={() => handleAddColors(index)} style={{marginTop: '8px'}}>
      添加颜色
    </button>
  </div>
))}

原代码错误分析 #

• product.sizes.colors是无效访问：product.sizes是数组，本身没有colors属性，会返回undefined，扩展操作会直接报错。
• 原逻辑错误地在sizes数组末尾新增了一个仅包含colors的对象，这不是“给指定size添加颜色”的需求，而是新增了一个无效的size条目。

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