React中如何将数组对象动态绑定到input输入框并提交至后端

问题原因 #

• 渲染输入项时遍历的是初始静态数组myArr，不是存储修改后数据的state变量input，输入框的value也绑定了myArr的原始值，导致state更新不会同步到视图，输入修改的内容也不会正确同步到提交用的state中
• price字段为数字类型，直接存储输入的字符串会导致后端接收的字段类型错误

修正代码 #

把渲染部分的遍历源替换为state的input变量，可选补充数字类型转换逻辑，完整代码如下：

const myArr = [
  { product: 'egg', price: 5, id: 1 },
  { product: 'cake', price: 3, id: 2 }
]

const [input, setInput] = useState(myArr)

const changeHandler = (id) => event => {
  const { name, value } = event.target;
  setInput(prev => prev.map((el) => el.id === id
    ? {
        ...el,
        // 对price字段做数字类型转换
        [name]: name === 'price' ? Number(value) : value,
      }
    : el,
  ));
};

const submitForm = (e) => {
  e.preventDefault();
  const printOut = input
  console.log({print:printOut});
  try {
    axios.post('/products/print', printOut)
  } catch (error) {
    console.log(error);
  }
}

return (
  <form onSubmit={submitForm}>
    {/* 遍历源改为state的input变量 */}
    {input.map(x=>(
      <div key={x.id}>
        <input name='product' value={x.product} onChange={(e) =>changeHandler(x.id)(e)}  />
        <input name='price' value={x.price} onChange={(e)=> changeHandler(x.id)(e)} />
      </div>
    ))}
    <input type="submit" value="Submit" />
  </form>
)

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