使用useState时表单输入值无法更新？技术求助

以下是导致state不更新的核心问题及修复方案：

1. Input组件事件处理函数拼写错误 #

在Input.js中，input标签的onChange被错误写成小写的onchange，React无法识别这个原生事件别名，导致输入事件无法传递到上层的onChange回调：

// 错误代码
<input {...inputProps} onChange={onchange} />

// 修复后
<input {...inputProps} onChange={onChange} />

2. ContactForm中value属性取值错误 #

在ContactForm.js的表单输入项循环里，错误地使用了数组inputs的name属性，而非当前循环项input的name，导致所有输入框的value始终绑定到undefined，state自然无法更新：

// 错误代码
value={values[inputs.name]} 

// 修复后
value={values[input.name]}

额外优化：处理setState的异步特性 #

当前onChange里的console.log(values)打印的是更新前的state，因为setValues是异步操作。如果需要查看更新后的state，可以通过useEffect监听values变化：

import React, {useState, useEffect} from 'react'

// ... 其他组件代码

useEffect(() => {
  console.log('更新后的state:', values)
}, [values])

同时推荐使用函数式更新方式更新state，避免闭包捕获旧state的问题：

const onChange= (e) => {
  setValues(prevState => ({...prevState, [e.target.name]: e.target.value}))
}

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