Email-validator验证失效求助：注册表单验证突然无法工作

Hey there, let's figure out why your email validation stopped working in signup.js—even though you didn't modify that file directly. I've gone through both your code files and spotted several key issues that could be causing this, plus some potential cross-file interference points to check:

1. Critical State Initialization Bug in signup.js (Most Likely Culprit) #

Looking at your signup.js constructor, you're overwriting the this.state object every time you assign a new property:

this.state = {firstName: ''};
this.state = {lastName: ''};
this.state = {email: ''};
// ... and so on

This means only the last state assignment (this.state = {errorMessage: null};) actually sticks—all other state properties like email are undefined. When your validation function runs, it's checking validator.validate(undefined), which will always return false, making your signup button stay disabled incorrectly.

Fix: Initialize all state properties in a single object:

constructor(props) {
  super(props);
  this.state = {
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    emailValidated: false,
    errorMessage: null
  };
}

2. Mismatched TextInput Value Bindings #

In signup.js, your TextInputs are bound to this.state.text—a property that doesn't exist in your state:

<TextInput 
  placeholder="Enter your e-mail" 
  value={this.state.text} // Wrong!
  onChangeText={(email) => this.setState({email})} 
/>

This means the input's value never updates with what the user types, so your validation function always sees an empty or undefined email value.

Fix: Bind each TextInput to its corresponding state property:

// For first name
<TextInput 
  style={styles.inputTextField} 
  placeholder="Enter your first name" 
  value={this.state.firstName}
  backgroundColor="white" 
  onChangeText={(firstName) => this.setState({firstName})} 
/>

// For email
<TextInput 
  style={styles.inputTextField} 
  placeholder="Enter your e-mail" 
  value={this.state.email}
  backgroundColor="white" 
  onChangeText={(email) => this.setState({email})} 
/>

Repeat this fix for the lastName and password TextInputs too.

3. Component Naming Conflict (Cross-File Interference) #

Both signup.js and login.js export a component named loginComponent:

// signup.js
export default class loginComponent extends Component { ... }

// login.js
export default class loginComponent extends Component { ... }

React Native's module caching can get confused by duplicate component names, potentially leading to the wrong component being rendered or state being unexpectedly overwritten when you navigate between screens.

Fix: Rename your components to be unique:

// signup.js
export default class SignupComponent extends Component { ... }

// login.js
export default class LoginComponent extends Component { ... }

Also double-check your navigation configuration to ensure you're referencing the correct component when navigating to the "SignUp" screen.

4. Fix login.js Errors to Avoid Environment Pollution #

Even though you're still working on login.js, it has several errors that could break your app's runtime environment indirectly:

• It has the same state initialization bug as signup.js (overwriting this.state multiple times)
• The "Sign up!" button in login.js is bound to this.handleSignUp, but this method isn't defined in the login component
• Its TextInputs also use the non-existent this.state.text value

Fixing these basic issues will prevent unexpected errors that could interfere with other parts of your app, like signup.js.

5. Verify email-validator Module Integrity #

If the above fixes don't work, check if the email-validator module is loading correctly:

• Clear your Metro bundler cache with: npx react-native start --reset-cache
• Try replacing the require statement with an import: import validator from 'email-validator'; (this is a cleaner ES6 syntax and might resolve module loading quirks)

Start with the first two fixes—they're the most likely reasons your email validation stopped working. Once those are done, the validation should start behaving as expected again.

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