は、私は私のプロジェクトでパスワードをハッシュするbcryptjsライブラリを使用しようとしているが、私はハッシュ処理に必要な機能を追加したとき、私はいくつかのエラーに直面ReactJSとbcryptjs

Question

で未定義のプロパティ「状態」を読み込めません。私はこのリンクの指示に従っています：bcryptjs instructions。

私は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) 

私はStackOverflowの質問を通じて検索し、鉱山に似たいくつかの質問を見つけた、と私はそれぞれ1で提案されたソリューションを使用しようとしましたが、何も変わっていないしました。ここでは、参照用の質問へのリンクは次のとおりです。Question1Question2Question3Question4

私は怒鳴る示したように、クラスのコンストラクタで私の機能をバインドしようとしましたが、同じエラーを得ました。

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> 

私のコードには何か問題がありますか？あなたは、コールバックやthisをbindする必要が

Answer 1

あなたはgenSaltに渡されたコールバックメソッドでコンテキストを失うされています

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

ソリューション：

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

や余分な変数を使用し、thisの代わりにその変数を使用します：

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

または.bind(this)を使用する：

一つの方法は、また、ここにarrow functionを使用している

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

は設定されません。

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); 
     }); 
    });