React中两个输入框值无法存入references数组问题求解

问题原因 #

• 状态更新逻辑错误：你写的setValues逻辑每次都会将references重置为空数组，同时把输入框的name属性作为values的顶层字段新增，导致输入内容完全没有存入references数组，而是生成了独立的平级字段。
• 输入框值绑定错误：两个文本输入框的value都绑定了整个references数组，文本输入框无法直接识别数组类型的值，会引发显示异常。

修复方案 #

推荐优先使用对象格式存储两个输入项的值，后续写入MongoDB时如果需要转数组也可以随时转换，可维护性更高：

1. 修正状态初始化（示例） #

import { useState } from 'react'

// 初始state示例
const [values, setValues] = useState({
  // 其他你需要的字段...
  references: {
    manufacturer: '',
    vehicleNumber: ''
  }
})

2. 修正事件处理函数 #

const handleReferencesChange = (e) => {
  // onChange事件不需要调用preventDefault，删掉即可
  setValues({
    ...values,
    references: {
      ...values.references,
      [e.target.name]: e.target.value
    }
  })
}

3. 修正输入框value绑定 #

<div className="col-md-6">
  <input
    className="form-control"
    name="manufacturer"
    type="text"
    onChange={handleReferencesChange}
    value={values.references.manufacturer}
  />
</div>

<div className="col-md-6">
  <input
    className="form-control"
    name="vehicleNumber"
    type="text"
    onChange={handleReferencesChange}
    value={values.references.vehicleNumber}
  />
</div>

如果你必须要数组格式的references #

可以通过名称映射索引的方式实现：

const handleReferencesChange = (e) => {
  const nameToIndex = {
    manufacturer: 0,
    vehicleNumber: 1
  }
  const newRefs = [...values.references]
  newRefs[nameToIndex[e.target.name]] = e.target.value
  setValues({
    ...values,
    references: newRefs
  })
}

对应输入框绑定：

// 制造商输入框
value={values.references[0] || ''}
// 车牌号输入框
value={values.references[1] || ''}

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