React使用useReducer时渲染[object Object]且输入框值无法修改问题

问题根因 #

• 邮箱输入框value属性绑定了完整的emailState对象，而非对象内存储输入值的value字段。React渲染非字符串类型的input值时会自动调用toString()方法，普通JS对象转字符串的结果就是[object Object]。
• 输入值无法变更的原因同源：每次触发onChange时dispatch仅更新了对象内的value属性，但input的value始终指向整个对象引用，无法同步最新的输入内容。
• 隐藏问题：emailChangeHandler中调用dispatch后直接读取emailState.isValid判断表单有效性，由于React状态更新是批量异步执行的，此时读取到的是更新前的旧状态，会导致表单有效性判断滞后一次触发。

修复方案 #

1. 修正邮箱输入框绑定 #

将邮箱输入框代码调整为：

<input
  type="email"
  id="email"
  value={emailState.value}
  onChange={emailChangeHandler}
  onBlur={validateEmailHandler}
/>

仅需将value={emailState}改为value={emailState.value}即可解决[object Object]显示和输入无响应的问题。

2. 优化表单有效性判断（推荐） #

删除emailChangeHandler、passwordChangeHandler内的setFormIsValid逻辑，新增独立的useEffect统一管理表单有效性：

useEffect(() => {
  setFormIsValid(
    emailState.isValid && enteredPassword.trim().length > 6
  );
}, [emailState.isValid, enteredPassword]);

该修改可以规避状态异步更新导致的有效性判断延迟问题。

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