#reactjs
Вопрос:
У меня ниже приведен код проверки формы в react:
validateRegister=()=gt;{ var flag=false; if(this.state.username.lengthlt;3) {this.setState({...this.state,nameError:'Name must be atleast 3 characters long!'});flag=true;} if(this.state.address.length==0) {this.setState({...this.state,addressError:'Address cannot be empty!'});flag=true;} if(this.state.phone.length!=10) {this.setState({...this.state,phoneError:'Phone no should be 10 digits long!'});flag=true;} if(this.state.email=='') {this.setState({...this.state,emailError:'Email cannot be empty!'});flag=true;} if(!this.state.password.lengthgt;=8||!this.state.password.lengthlt;=12) {this.setState({...this.state,passError:'Password should be between 8-12 characters!'});flag=true;} setTimeout(()=gt;{console.log(this.state);},2000); return flag; } Что делает этот код, так это то, что он устанавливает ошибку всякий раз, когда какое-либо поле не соответствует требуемым критериям. Теперь проблема в том, что если я отправлю форму без заполнения какого-либо поля, то что должно было быть сделано, так это то, что все ошибки должны были быть установлены. Но вместо этого происходит то, что установлена только ошибка пароля(последняя), а все остальные ошибки пусты. setTimeout Это следует из функции, в которой я вижу, что установлена только ошибка передачи.
username: "" password: "" address: "" phone: "" email: "" passError: "Password should be between 8-12 characters!" emailError: "" nameError: "" phoneError: "" addressError: "" redirect: false Может ли кто-нибудь помочь мне решить эту проблему? Я не получаю абсолютно никакого представления об этом.
Спасибо!
Комментарии:
1. Это происходит потому, что настройка состояния является асинхронной операцией. Поэтому из-за этого он обновляет только последнее условие.
2. Спасибо за комментарий. Но я думаю, что причина в чем-то другом.
3. Попробуйте изменить порядок условий if, и вы увидите, что условие, которое, наконец, будет иметь правильные значения.
4. Попробуйте вычислить все ошибки за один раз и установить ошибки, но это может преодолеть вашу асинхронную операцию. Если вы хотите запустить какую-либо функцию после обновления, используйте
this.setState({...this.state, errors}, yourfunction});5. Я нашел проблему. Я удалил
this.state, и все сработало как по волшебству