Не удается прочитать свойство 'состояние' из неопределенного с ReactJS и bcryptjs

Question

Я пытаюсь использовать библиотеку bcryptjs для хеширования паролей в моем проекте, но когда я добавляю функции, необходимые для процесса хеширования, я сталкиваюсь с некоторыми ошибками. Я следую инструкциям в этой ссылке: инструкции bcryptjs.

Идея в том, когда я называю SubmitClick Я должен хешировать предоставленный пароль, а затем, используя fetchДобавить это в мою базу данных. Вот код для моей страницы CreateUser.js:

import React, { Component } from 'react';
import bcrypt from 'bcryptjs';

class CreateUser extends Component {

  constructor(props){
    super(props);
    this.state={
      id:'',
      email:'',
      first_name:'',
      last_name:'',
      personal_phone:'',
      password:'',
      reTypepassword:''
    }
  }

  SubmitClick(){

    if (this.state.password !== this.state.reTypepassword){
      alert('Passwords do not match. Please check your data !');
    } else {

      bcrypt.genSalt(10, function(err, salt) {
          bcrypt.hash(this.state.password, salt, function(err, hash) {
              console.log(hash); 
          });
      });

      fetch('http://localhost:4000/users/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          //'Authorization': 'Basic YWRtaW46c3VwZXJzZWNyZXQ=',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: this.state.email,
          first_name: this.state.first_name,
          last_name: this.state.last_name,
          personal_phone: this.state.personal_phone,
          password: this.state.password
        })
      })
      .then(response => response.json())
      .then(parsedJSON => this.setState({id : parsedJSON._id}, function(){
        this.props.history.push({
          pathname : '/get',
          state : { id : this.state.id }
        });
      }))
      .catch(error => alert('Check your data! Some of the values passed aren`t valid'))
    }
  }

  changeID(parsedJSON){
    this.setState({id : parsedJSON._id})
  }

  changeEmail(event){
    this.setState({email : event.target.value})
  }

  changeFname(event){
    this.setState({first_name : event.target.value})
  }

  changeLname(event){
    this.setState({last_name : event.target.value})
  }

  changePhone(event){
    this.setState({personal_phone : event.target.value})
  }

  changePassword(event){
    this.setState({password : event.target.value})
  }

  changeReTPassword(event){
    this.setState({reTypepassword : event.target.value})
  }

  render() {
    return (
      <div id="layout">
        <div id="main">
          <div className="App-header">
              <label htmlFor="title">Create User</label> 
          </div>
          <div className="content" id="content">
            <div className="infos">
              <input id="email" type="text" name="email" placeholder="Email" 
              onChange = {(event)=> this.changeEmail(event)}/>
            </div>
            <div className="infos">
              <input id="f_name" type="text" name="F_name" placeholder="First Name" 
              onChange = {(event)=> this.changeFname(event)}/>
            </div>
            <div className="infos">
              <input id="l_name" type="text" name="L_name" placeholder="Last Name" 
              onChange = {(event)=> this.changeLname(event)}/>
            </div>
            <div className="infos">
              <input id="phone" type="text" name="L_name" placeholder="Personal Phone" 
              onChange = {(event)=> this.changePhone(event)}/>
            </div>
            <div className="infos">
              <input id="senha" type="password" name="senha" placeholder="Password" 
              onChange = {(event)=> this.changePassword(event)}/>
            </div>
            <div className="infos">
              <input id="senha" type="password" name="senha" placeholder="Re-type password" 
              onChange = {(event)=> this.changeReTPassword(event)}/>
            </div>
            <div className="buttons">                                  
              <button type="submit" onClick={(event) => this.SubmitClick()} className="buttonsUser">Submit</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default CreateUser;

Если я удаляю следующую часть кода, код работает отлично, без хеширования:

  bcrypt.genSalt(10, function(err, salt) {
      bcrypt.hash(this.props.password, salt, function(err, hash) {
          console.log(hash); 
      });
  });

Но с этой частью я сталкиваюсь с этой ошибкой:

> CreateUser.js:26 Uncaught TypeError: Cannot read property 'state' of undefined
    at CreateUser.js:26
    at bcrypt.js:155
    at run (setImmediate.js:40)
    at runIfPresent (setImmediate.js:69)
    at onGlobalMessage (setImmediate.js:109)

Я провел поиск по всем вопросам Stackru и нашел несколько вопросов, похожих на мои, и я попытался использовать решения, предложенные в каждом из них, но ничего не изменилось. Вот ссылки на вопросы для справки: Вопрос1 Вопрос2 Вопрос3 Вопрос4

Я пытался связать свои функции в конструкторе классов, как показано ниже, но получил ту же ошибку.

  constructor(props){
    super(props);
    this.SubmitClick = this.SubmitClick.bind(this);
    this.state={
      id:'',
      email:'',
      first_name:'',
      last_name:'',
      personal_phone:'',
      password:'',
      reTypepassword:''
    }
  }

Я пытался связать свои функции в строке, в этом случае ничего не произошло, когда я нажал кнопку, что странно.

    <div className="buttons">                                  
      <button type="submit" onClick={(event) => this.SubmitClick.bind(this)} className="buttonsUser">Submit</button>
    </div>

Я понятия не имею, что не так с моим кодом, какие-либо предложения?

Answer 1

Вы теряете контекст в методе обратного вызова, переданном genSalt:

bcrypt.genSalt(10, function(err, salt) {
    bcrypt.hash(this.state.password, salt, function(err, hash) {
          console.log(hash); 
    });
});

Решение:

Одним из способов является использование функции стрелки здесь также:

bcrypt.genSalt(10, (err, salt) => {
    bcrypt.hash(this.state.password, salt, (err, hash) => {
          console.log(hash); 
    });
});

Или использовать .bind(this):

bcrypt.genSalt(10, function(err, salt) {
    bcrypt.hash(this.state.password, salt, function(err, hash) {
          console.log(hash); 
    });
}.bind(this));

Или используйте дополнительную переменную, и используйте эту переменную вместо this:

SubmitClick(){
    if (this.state.password !== this.state.reTypepassword){
      alert('Passwords do not match. Please check your data !');
    }else {

        let that = this;    //here

        bcrypt.genSalt(10, function(err, salt) {
            bcrypt.hash(that.state.password, salt, function(err, hash) {
                console.log(hash); 
            });
        });
    }
    .....
}

Answer 2

Вам нужно bind обратный звонок или this не будет установлен:

  bcrypt.genSalt(10, function(err, salt) {
      bcrypt.hash(this.state.password, salt, function(err, hash) {
          console.log(hash); 
      });
  }.bind(this));

Или используйте функцию стрелки:

  bcrypt.genSalt(10, (err, salt) => {
      bcrypt.hash(this.state.password, salt, function(err, hash) {
          console.log(hash); 
      });
  });