ReactJS点击新增多组输入时所有输入框数据同步异常问题求解

问题根因 #

你遇到的问题核心是数据结构和输入框绑定逻辑不匹配，具体有三个错误点：

• 当前inputs数组的每个元素只存了单个字符串，但每一行有数量、重量两个输入框，两个输入框的value都绑定了同一个inputValue，修改任意一个输入框都会覆盖当前下标对应的值，导致同个行的两个输入框同步变化；如果事件回调参数处理错误，还会出现全量输入框数据同步覆盖的问题。
• 你用的Number是封装后的组件，绝大多数这类组件的onChange回调会直接返回输入值而非原生事件对象，你代码中写的value.target.value实际会取到undefined，异常赋值就会导致所有输入框数据错乱。
• 你当前把新增按钮放在map循环内部，会导致每一行都渲染一个Add按钮，不符合常规交互逻辑，建议移到循环外部。

修正方案 #

首先调整inputs的初始化结构，每一行对应一个对象，分别存储两个输入框的值，初始化示例：

const [inputs, setInputs] = useState([{ quantity: '', weight: '' }])

然后调整渲染和更新逻辑，修正后的代码如下：

{inputs.map((inputItem, index) => <>
  <Number 
    key={"addQ" + index}
    type="input"
    placeholder="3"
    name="quantiteTab[]"
    label="Quantité*"
    classField="col-lg-2"
    onChange={(value) => setInputs(inputs => {
      const copy = [...inputs];
      // 如果Number组件返回的是原生事件对象，这里替换为 value.target.value
      copy[index].quantity = value;
      return copy;
    })}
    value={inputItem.quantity}
  />
  <Number 
    key={"addP" + index}
    type="input"
    placeholder="206"
    name="poidsTab[]"
    label="Poids total (kg)"
    classField="col-lg-3"
    onChange={(value) => setInputs(inputs => {
      const copy = [...inputs];
      // 如果Number组件返回的是原生事件对象，这里替换为 value.target.value
      copy[index].weight = value;
      return copy;
    })}
    value={inputItem.weight}
  />
</>)}

{/* 新增按钮移到循环外部 */}
<button className="button add-line" type="button" onClick={() => setInputs(inp => [...inp, { quantity: '', weight: '' }])}>Add</button>

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