React+Firebase开发需求：将时分字段合并为总分钟数存储

1. 调整状态初始化与新增Slot逻辑 #

原来的handleSlotCount添加的是空字符串，需要改成包含所有必要字段的初始对象，确保每个slot都有from、fromMinute、to、toMinute四个字段：

// 初始化form状态
setForm({
  slots: []
})

// 新增slot的方法
const handleSlotCount = () => {
  setForm({
    ...form,
    slots: [...form.slots, { from: 0, fromMinute: 0, to: 0, toMinute: 0 }]
  })
}

2. 处理输入字段的变更逻辑 #

handleSlot函数可直接复用，给新增的输入框设置对应name属性即可：

const handleSlot = (e, i) => {
  const { name, value } = e.target;
  setForm(form => ({
    ...form,
    slots: form.slots.map((el, index) => index === i
      ? {
        ...el,
        [name]: parseInt(value) || 0, // 避免输入空值时转为NaN
      }
      : el
    ),
  }));
};

3. 修改Firebase提交逻辑 #

提交前先计算每个slot的最终from和to值，移除临时的fromMinute和toMinute字段，再存入Firestore：

const handleSubmit = async () => {
  // 处理slots数据，计算最终求和值
  const processedSlots = form.slots.map(slot => ({
    from: (slot.from || 0) + (slot.fromMinute || 0),
    to: (slot.to || 0) + (slot.toMinute || 0)
  }))
  
  // 提交到Firebase
  await addDoc(slotsCollectionRef, {
    ...form,
    slots: processedSlots
  })
  
  // 重置表单
  setForm({ slots: [] })
}

4. 更新JSX渲染部分 #

添加from minute和to minute的输入框，对应每个slot：

{form.slots.map((slot, i) => (
  <div key={i} className="slot-item">
    <label><b>From</b></label>
    <br />
    <input
      type="number"
      name="from"
      value={slot.from}
      onChange={e => handleSlot(e, i)}
    />
    <br />
    <label><b>From Minute</b></label>
    <br />
    <input
      type="number"
      name="fromMinute"
      value={slot.fromMinute}
      onChange={e => handleSlot(e, i)}
    />
    <br />
    <label><b>To</b></label>
    <br />
    <input
      type="number"
      name="to"
      value={slot.to}
      onChange={e => handleSlot(e, i)}
    />
    <br />
    <label><b>To Minute</b></label>
    <br />
    <input
      type="number"
      name="toMinute"
      value={slot.toMinute}
      onChange={e => handleSlot(e, i)}
    />
    <hr />
  </div>
))}
<button onClick={handleSlotCount}>添加Slot</button>
<button onClick={handleSubmit}>提交</button>

关键说明 #

• 所有数字输入都做了||0处理，防止用户输入空值时出现NaN，确保计算正常
• 提交时才对数值求和，保留用户输入的原始字段，提升交互体验
• 每个slot的字段通过name属性和handleSlot函数绑定，无需额外编写多个处理函数

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