React函数组件中如何用useState存储指定格式动态字段数据

你需要存储的目标数据为包含item_id、description、quantity三个字段的对象数组，直接用useState维护对应结构的状态，配套增删改、提交逻辑即可，最终输出格式可直接入库。

核心实现代码 #

import { useState } from 'react';

export default function ItemStorageDemo() {
  // 初始化状态，结构完全匹配要求的入库格式
  const [formData, setFormData] = useState({
    items: []
  });

  // 新增条目
  const addItem = () => {
    const newItem = {
      item_id: Date.now(), // 临时ID，选择商品时替换为真实商品ID即可
      description: '',
      quantity: '1'
    };
    setFormData(prev => ({
      ...prev,
      items: [...prev.items, newItem]
    }));
  };

  // 更新指定条目的字段值
  const updateItem = (targetIndex, field, value) => {
    setFormData(prev => {
      const newItems = [...prev.items];
      newItems[targetIndex] = {
        ...newItems[targetIndex],
        [field]: value
      };
      return { ...prev, items: newItems };
    });
  };

  // 删除指定条目
  const deleteItem = (targetIndex) => {
    setFormData(prev => ({
      ...prev,
      items: prev.items.filter((_, idx) => idx !== targetIndex)
    }));
  };

  // 提交数据到数据库
  const submitToDB = async (e) => {
    e.preventDefault();
    // 此处打印可查看最终结构，和你给出的示例格式完全一致
    console.log('待入库数据:', formData);
    // 替换为实际接口请求逻辑
    await fetch('/your-save-api', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    });
  };

  return (
    <form onSubmit={submitToDB} className="p-5 max-w-3xl">
      {/* 动态渲染条目列表 */}
      {formData.items.map((item, idx) => (
        <div key={item.item_id} className="flex gap-4 items-end mb-4 p-3 border rounded">
          <div>
            <label className="block text-sm mb-1">商品ID</label>
            <input
              type="number"
              value={item.item_id}
              onChange={e => updateItem(idx, 'item_id', Number(e.target.value))}
              className="border px-2 py-1.5 rounded w-28"
            />
          </div>
          <div className="flex-1">
            <label className="block text-sm mb-1">描述</label>
            <input
              type="text"
              value={item.description}
              onChange={e => updateItem(idx, 'description', e.target.value)}
              className="border px-2 py-1.5 rounded w-full"
            />
          </div>
          <div>
            <label className="block text-sm mb-1">数量</label>
            <input
              type="number"
              min="1"
              value={item.quantity}
              onChange={e => updateItem(idx, 'quantity', e.target.value)}
              className="border px-2 py-1.5 rounded w-24"
            />
          </div>
          <button
            type="button"
            onClick={() => deleteItem(idx)}
            className="px-3 py-1.5 bg-red-500 text-white rounded"
          >
            删除
          </button>
        </div>
      ))}

      <div className="flex gap-3">
        <button
          type="button"
          onClick={addItem}
          className="px-4 py-2 bg-gray-100 border rounded"
        >
          新增条目
        </button>
        <button
          type="submit"
          className="px-4 py-2 bg-blue-600 text-white rounded"
        >
          保存到数据库
        </button>
      </div>
    </form>
  );
}

注意事项 #

• 所有状态更新采用不可变写法，避免React无法检测状态变化导致页面不更新
• 通用的updateItem方法可复用，不需要为每个字段单独写更新逻辑
• 提交时formData序列化后的JSON结构和要求的格式完全一致，不需要额外做格式转换
• 如果是从商品选择弹窗/下拉框选品，直接把选中的商品ID传入updateItem方法赋值给item_id字段即可

动态字段展示效果参考

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