React Native+GraphQL Apollo认证开发：输入用户名时触发undefined is not an object (evaluating 'event.target.name')错误求助

嘿，我一眼就发现问题所在了——React Native 的 TextInput 和 Web 端的 input 元素逻辑不一样！Web 端的输入框回调会传递一个完整的事件对象，但 React Native 中 onChangeText 直接传入的是输入框的文本值，根本没有 event.target 这回事，这就是你触发 undefined is not an object (evaluating 'event.target.name') 错误的核心原因。

下面是具体的修复步骤和代码调整：

1. 重构 useForm 自定义 Hook #

我们需要把原来依赖 Web 事件对象的 onChange 改成适配 React Native 的写法，让它能接收字段名并返回处理文本输入的函数：

// hooks.js
import { useState } from 'react';

export const useForm = (callback, initialState = {}) => {
  const [values, setValues] = useState(initialState);

  // 修改为：接收字段名，返回处理文本变化的函数
  const onChange = (fieldName) => (text) => {
    setValues(prevState => ({ ...prevState, [fieldName]: text }));
  };

  // React Native 中没有表单默认提交行为，移除 event.preventDefault()
  const onSubmit = () => {
    callback();
  };

  return { onChange, onSubmit, values };
};

2. 调整 SignIn.js 中的 TextInput 回调 #

现在需要给每个 TextInput 的 onChangeText 传入对应字段名，让 Hook 知道要更新哪个值：

// SignIn.js 中的返回部分
return (
  <View>
    <TextInput
      value={values.name}
      onChangeText={onChange('name')} // 传入字段名"name"
      placeholder="Enter User Name"
    />
    <TextInput
      value={values.password}
      onChangeText={onChange('password')} // 传入字段名"password"
      placeholder="Enter Password"
    />
    <TouchableOpacity onPress={onSubmit}>
      <Text>SIGN IN</Text>
    </TouchableOpacity>
  </View>
);

3. 优化 Apollo Mutation 的变量传递（可选） #

为了确保每次调用 loginUser 时都能获取到最新的表单值，可以把 variables 改成函数形式：

const [loginUser, { loading }] = useMutation(mutationData.LOGIN_USER, {
  update(_, { data: { login: userData } }) {
    navigation.replace('Navigator');
  },
  onError(err) {
    console.log(err.graphQLErrors[0].extensions.errors);
  },
  // 用函数返回最新的 values，避免闭包导致的旧值问题
  variables: () => values,
});

这样调整后，输入框的 onChange 逻辑就能正常工作，不会再出现 event.target 相关的错误了。

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