undefined 不是 object（评估“event.target.name”）

Question

因此，我尝试使用 react native 和 graphql apollo 进行身份验证，但我遇到了一些问题。 当我尝试在名称 textinput 上键入时会弹出此错误。

登录.js

// ... other imports
import { useMutation } from '@apollo/client';
import { useForm } from '../constants/hooks';

const { onChange, onSubmit, values } = useForm(loginUserCallback, {
    name: '',
    password: '',
  });

  const [loginUser, { loading }] = useMutation(mutationData.LOGIN_USER, {
    update(_, { data: { login: userData } }) {
      // context.login(userData);
      navigation.replace('Navigator'); // router.push("/");
      // toast.success(`Logged In Successfully`, { autoClose: 800 });
    },
    onError(err) {
      console.log(err.graphQLErrors[0].extensions.errors);
    },
    variables: values,
  });

  function loginUserCallback() {
    loginUser();
  }

return (
  <View>
    <TextInput
      value={values.name}
      name="name"
      onChangeText={onChange}
      placeholder="Enter User Name"
    />
    <TextInput
      value={values.password}
      name="password"
      onChangeText={onChange}
      placeholder="Enter Password"
    />

    <TouchableOpacity onPress={onSubmit}>
      <Text>SIGN IN</Text>
    </TouchableOpacity>
  </View>
);

钩子.js

import { useState } from 'react';

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

  const onChange = (event) => {
    setValues({ ...values, [event.target.name]: event.target.value });
  };

  const onSubmit = (event) => {
    event.preventDefault();
    callback();
  };

  return {
    onChange,
    onSubmit,
    values,
  };
};

突变数据.js

import { gql } from '@apollo/client';

// =============
// Auth
// =============

const LOGIN_USER = gql`
  mutation login($name: String!, $password: String!) {
    login(name: $name, password: $password) {
      id
      email
      username
      createdAt
      token
    }
  }
`;

const REGISTER_USER = gql`
  mutation register(
    $username: String!
    $email: String!
    $password: String!
    $confirmPassword: String!
  ) {
    register(
      registerInput: {
        username: $username
        email: $email
        password: $password
        confirmPassword: $confirmPassword
      }
    ) {
      id
      email
      username
      createdAt
      token
    }
  }
`;

export default {
  LOGIN_USER,
  REGISTER_USER,
};

额外信息：

• 我使用 expo 进行本机反应。
• 所有进口都没有问题。
• 我安装的所有软件包都没有问题。
• CODESANDBOX 链接： https://codesandbox.io/s/modern-sound-boctx5?file=/src/SignIn.js

如果我错过了任何细节，我知道这是一个没有信息的帖子，请在评论中告诉我，我会尽力提供这些信息，也是的，我尝试了几个小时来解决这个错误。

Answer 1

根据 React Native 关于 onChangeText function for TextInput的文档：

更改的文本作为单个字符串参数传递给回调处理程序。

因此， event是字符串， event.target是未定义的，并且在尝试获取event.target.name时会出现此错误。 要获取目标和名称，请改用onChange function ，并将event换成nativeEvent 。

Answer 2

好的，我想我已经解决了你的问题

一个问题是，@Appfred 指出的onChangeText返回值而不是事件

第二个问题是TextInput没有名称道具，因此它忽略了您传递的那个

您可以通过一些调整来解决您的问题。

在您的自定义挂钩中，您需要像这样更改onChange签名

  const onChange = (name, value) => {
    setValues({ ...values, [name]: value });
  };

你需要以这种方式修改你的表格

<View>
    <TextInput
      value={values.name}
      onChangeText={value => onChange('name', value)}
      placeholder="Enter User Name"
    />
    <TextInput
      value={values.password}
      onChangeText={value => onChange('password', value)}
      placeholder="Enter Password"
    />

    <TouchableOpacity onPress={onSubmit}>
      <Text>SIGN IN</Text>
    </TouchableOpacity>
  </View>

或者，如果您更喜欢咖喱 function 方法，您可以这样做

  const onChange = name => value => {
    setValues({ ...values, [name]: value });
  };

接着

<View>
    <TextInput
      value={values.name}
      onChangeText={ onChange('name') }
      placeholder="Enter User Name"
    />
    <TextInput
      value={values.password}
      onChangeText={ onChange('password') }
      placeholder="Enter Password"
    />

    <TouchableOpacity onPress={onSubmit}>
      <Text>SIGN IN</Text>
    </TouchableOpacity>
  </View>