React Native中useReducer处理登录表单值更新异常问题求助

看起来你的问题出在自定义MyInput组件调用onInputChange时的参数顺序不匹配！这直接导致了表单状态更新逻辑混乱，出现了奇怪的键值对（比如"qwerty123": true）。

问题根源 #

你在LoginScreen里定义的inputChangeHandler期望的参数顺序是：

(inputIdentifier, inputValue, inputValidity)

也就是第一个参数是输入框的唯一标识（email/password），第二个是用户输入的内容，第三个是输入值的有效性状态。

但如果你的MyInput组件里是类似这样的错误调用：

// 错误示例：参数顺序颠倒了
onInputChange(text, isValid, props.id)

就会让inputIdentifier接收到输入文本（比如test@test.com），inputValue接收到布尔值true。最终dispatchFormState时，action.input变成了输入文本，action.value变成了有效性状态，从而在更新inputValues时出现了"test@test.com": true这种完全不符合预期的键值对。

修复步骤 #

1. 修正MyInput组件的回调调用顺序
   找到MyInput组件内触发onInputChange的代码，确保参数顺序严格对应(inputId, inputValue, isValid)，示例如下：

   // MyInput组件内的正确调用方式
   const handleTextChange = (text) => {
     // 先完成输入值的有效性校验，得到isValid状态
     const isValid = validateInput(text);
     // 按「标识、值、有效性」的顺序传递参数
     props.onInputChange(props.id, text, isValid);
   };
   

2. 修正拼写错误（可选但建议）
   你代码里的intialState拼写有误，应该是initialState。虽然这不会直接导致当前问题，但修正后能避免后续潜在的bug：

   // 修正前
   const intialState = { ... };
   // 修正后
   const initialState = { ... };
   const [formState, dispatchFormState] = useReducer(loginReducer, initialState);
   

3. 添加日志调试（可选）
   可以在inputChangeHandler中加入日志，确认参数是否正确接收：

   const inputChangeHandler = useCallback(
     (inputIdentifier, inputValue, inputValidity) => {
       console.log('输入标识:', inputIdentifier, '输入值:', inputValue, '是否有效:', inputValidity);
       dispatchFormState({
         type: LOGIN_FORM,
         value: inputValue,
         isValid: inputValidity,
         input: inputIdentifier,
       });
     },
     [dispatchFormState]
   );
   

验证修复 #

完成上述调整后，当你输入邮箱和密码时，formState.inputValues应该会正确更新为：

{
  email: "test@test.com",
  password: "qwerty123"
}

此时点击登录按钮，authHandler就能获取到正确的值并派发给authActions.login了。

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