SetState导致React.js中的应用程序崩溃

Question

I have recently started working on react.js , while creating the login page I have used setstate method to set the value of userEmail to text box.

I have created a method which checks the validity of email address and I am calling it every time when user enters a new letter.

handleChangeInEmail(event) {
    var value = event.target.value;
    console.log("change in email value" + value);
    if(validateEmailAddress(value) == true) {
      this.setState(function() {
        return {
              showInvalidEmailError : false,
              userEmailForLogin: value,
           }
     });
   } else {
     this.setState(function() {
       return {
              showInvalidEmailError : true,
              userEmailForLogin: value

      }
  });
}

This method and userEmailForLogin state is passed in render method as

<EmailLoginPage  
   userEmailForLogin = {this.state.userEmailForLogin}
   onHandleChangeInEmail= {this.handleChangeInEmail}
/>

I am using the method to validate the email address and the method is

validateEmailAddress : function(emailForLogin) {
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailForLogin))  {  
            return true; 
        }  
        return false;  
    },

I am using this method and state in render of EmailLoginPage as <input type="text" name="" placeholder="Enter Email" className="email-input-txt" onChange={props.onHandleChangeInEmail} value = {props.userEmailForLogin}/>

This is working fine in normal case , but when I try to input a large email addess say yjgykgkykhhkuhkjhgkghjkhgkjhghjkghjghghkghbghbg@gmail.com , it crashes

IMO the frequent change in state is causing this but I couldn't understand what should be done to get rid of this.

Answer 1

A solution using debounce. This way multiple setState can be reduced.

DEMO: https://jsfiddle.net/vedp/kp04015o/6/

class Email extends React.Component {
    constructor (props) {
        super(props)
        this.state = { email: "" }
    }

    handleChange = debounce((e) => {
        this.setState({ email: e.target.value })
    }, 1000)

    render() {
        return (
            <div className="widget">
                <p>{this.state.email}</p>
                <input onChange={this.handleChange} />
            </div>
        )
    }
}

React.render(<Email/>, document.getElementById('container'));


function debounce(callback, wait, context = this) {
  let timeout = null 
  let callbackArgs = null

  const later = () => callback.apply(context, callbackArgs)

  return function() {
    callbackArgs = arguments
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}

Answer 2

I think issue is with the regex only, i tried with other and it's working properly.

Instead of writing the if/else inside change function simply you are write it like this:

change(event) {
    var value = event.target.value;
    this.setState({
       showInvalidEmailError : this.validateEmailAddress(value),
       value: value,
    });
}

Copied the regex from this answer: How to validate email address in JavaScript?

Check the working solution:

 class App extends React.Component { constructor(){ super(); this.state = { value: '', showInvalidEmailError: false } this.change = this.change.bind(this); } change(event) { var value = event.target.value; this.setState(function() { return { showInvalidEmailError : this.validateEmailAddress(value), value: value, } }); } validateEmailAddress(emailForLogin) { var regex = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/; if(regex.test(emailForLogin)){ return true; } return false; } render() { return( <div> <input value={this.state.value} onChange={this.change}/> <br/> valid email: {this.state.showInvalidEmailError + ''} </div> ); } } ReactDOM.render( <App/>, document.getElementById("app") ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app'/> 

Answer 3

You could use Lodash's debounce function so that the check function is not called unless the user stops typing for x amount of time (300ms in my scenario below).

_this.debounceCheck = debounce((value) => {
  if(validateEmailAddress(value)) {
    this.setState(function() {
      return {
        showInvalidEmailError : false,
        userEmailForLogin: value,
      }
    });
  } else {
    this.setState(function() {
      return {
        showInvalidEmailError : true,
        userEmailForLogin: value
      }
    });
  }
}, 300)

handleChangeInEmail(event) {
  _this.debounce(event.target.value)
}