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>