Próbuję utworzyć prosty formularz do przechwytywania wiadomości e-mail i hasła dla nowego użytkownika rejestrującego się w Firebase. Używam React with Typescript i otrzymuję błąd „Obiekt jest prawdopodobnie„ null ”. TS2531” w następującym sekcja kodu:

 <form onSubmit={(event) => { this.handleSignUp({event, email: this._email.current.value, password: this._password.current.value})}}>

W szczególności to this._email.current.value i this._password.current.value zgłaszają ten błąd.

Zagłębiłem się w temat zarówno kodu błędu, jak i skryptów typu i ma to coś wspólnego z „strictNullChecks” w maszynopisie, ale naprawdę nie chcę wyłączać tej opcji i nie sądzę, że mam wystarczające umiejętności lub zrozumienie kodowania, aby wiedzieć, jak obejść ten problem. Mimo że rozumiem, że formularz można przesłać z pustymi wartościami, sprawdzam później przy uwierzytelnianiu firebase, aby upewnić się, że istnieją ciągi zawierające więcej niż 4 znaki.

Poniżej znajduje się kod całego komponentu React.

interface IHandleSubmitNewUserFunc {
    event: any,
    email: any,
    password: any
}

class NewUserSignup extends React.Component {
     constructor(props: any) {
         super(props);
         this.handleSignUp = this.handleSignUp.bind(this);
     }

    handleSignUp(input: IHandleSubmitNewUserFunc) {
        input.event.preventDefault();
        const { email, password } = input;
        if (email.length < 4 && email != null) {
            alert('Please enter an email address.');
            return;
        }
        if (password.length < 4 && password != null) {
            alert('Please enter a password.');
            return;
        }
        firebase.auth().createUserWithEmailAndPassword(email, password).catch(function (error) {
            var errorCode = error.code;
            var errorMessage = error.message;
            if (errorCode == 'auth/weak-password') {
                alert('The password is too weak.');
            } else {
                alert(errorMessage);
            }
            console.log(error);
        });
    }

    private _email = React.createRef<HTMLInputElement>();
    private _password = React.createRef<HTMLInputElement>();

    render() {
        return <div>
            <div className="signup-modal-container">
                <div className="identity-panel">
                    <img src={logo}></img>
                    <form onSubmit={(event) => { this.handleSignUp({event, email: this._email.current.value, password: this._password.current.value})}}>
                        <div className="form-flex-container">
                            <div className="signup-item">
                                <h2>
                                    Sign Up
                                </h2>
                                <label htmlFor="email" id="email">
                                    Email:
                                </label>
                            </div>
                            <div className="signup-item">
                                <div className="input-container">
                                    <input type="text" name="email" id="email" ref={this._email}/>
                                </div>
                            </div>
                            <div className="signup-item">
                                <label htmlFor="password">
                                    Password:
                                </label>
                            </div>
                            <div className="signup-item">
                                <div className="input-container">
                                    <input type="password" name="password" id="password" ref={this._password}/>
                                </div>
                            </div>
                            <div className="signup-item">
                                <button type="submit">
                                    Sign Up
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <p>
            NewUserSignup is showing
            </p>

        </div>
    }
}
export default NewUserSignup;

Nie jestem pewien, jakiego kodu potrzebowałbym, aby nie zgłaszać tego błędu, każda rada jest wymagana.

0
glitchwizard 16 grudzień 2019, 08:55

1 odpowiedź

Prawie tak, jak mówi. Odniesienia są domyślnie zerowe, nie ma gwarancji, że current zostanie przypisane w momencie uzyskania do nich dostępu (o ile kod wie).

Masz 2 opcje:

  • Dodaj wiarygodne sprawdzenie przed dostępem this._email.current i this._password.current.
const eCurrent = this._email.current;
const pCurrent = this._password.current;
if (!eCurrent || !pCurrent) {
  // This will probably never happen, to respond to events these will be hooked up.
  return;
}
  • Użyj potwierdzenia niezerowego, ponieważ wiesz, że to bezpieczna operacja: this._email.current!.value.
// Assert that current won't be null.
const emailValue = this._email.current!.value;
const passwordValue = this._password.current!.value;
1
Evan Trimboli 17 grudzień 2019, 00:05
Wybacz moją ignorancję, ale jak one dokładnie wyglądają? Moim najlepszym przypuszczeniem z operatorem prawdy byłoby dodanie modyfikującego kodu w następujący sposób ```
{ this.handleSignUp( {event, email: () => {if(this._email. bieżąca.wartość){zwróć to._email.bieżąca.wartość}, hasło: () => { if(to._hasło.bieżąca.wartość){zwróć to._hasło.bieżąca.wartość} }) }}> ```
 – 
glitchwizard
16 grudzień 2019, 09:31
Myślę, że proszę o pokazanie zakodowanego przykładu tego, jak to wygląda, nie dlatego, że nie chcę wykonywać pracy, ale dosłownie nie wiem, jak wygląda prawdziwe sprawdzenie lub asercja niepusta. Teraz je wygoogluję.
 – 
glitchwizard
16 grudzień 2019, 09:33