質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

470閲覧

componentWillMount() と componentDidMount() ってこういう認識で合ってる???間違ってたら教えてください。。

MOTOMUR

総合スコア195

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/10/13 13:34

とりあえず説明しやすいように作成中コード貼ります。

js

1class Login extends Component{ 2 constructor (props) { 3 super(props) 4 this.state = { 5 email: '', 6 password:'' 7 }; 8 } 9 10 componentWillMount() { 11 firebase.initializeApp() 12 }; 13 14 handleChange_email = (event) => { 15 this.setState({ 16 email: event.target.value, 17 }); 18 }; 19 20 handleChange_password = (event) => { 21 this.setState({ 22 password: event.target.value 23 }); 24 }; 25 26 handleChange_button = (event) => { 27 firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password) 28 }; 29 30componentDidMount(){ 31 firebase.auth().onAuthStateChanged(function(user){ 32 if(user){ 33 34 } 35 else { 36 37 } 38 }) 39}; 40 41 render(){ 42 return( 43 <div> 44 <TextField 45 id="emailform" 46 value={this.state.email} 47 floatingLabelText="UserID" 48 onChange={this.handleChange_email} 49 style={{ 50 margin: '0 auto', 51 }} 52 /> 53 <br /> 54 <TextField 55 id="passwordform" 56 value={this.state.password} 57 floatingLabelText="password" 58 type='password' 59 onChange={this.handleChange_password} 60 /> 61 <br /> 62 <RaisedButton 63 label="Login" 64 sedondary={true} 65 onClick={this.handleChange_button} 66 /> 67 </div> 68 ) 69 } 70}

まだif(user)は未完成何ですけど、とりあえず、このコードのやりたいことは、

このページ来た時に、発動する
componentWillMount() {
firebase.initializeApp()
};
こやつでfirebaseのアプリ起動して、

ボタン押した時に、
componentDidMount(){
firebase.auth().onAuthStateChanged(function(user){
if(user){

} else { }

})
};
こやつでログイン状態参照して、(<Route>で記述した別ページに飛ばそうとしてます。)←ここは方針立たず。

とりあえずcomponentWillMount() と componentDidMount() ってこういう認識で合ってる???
っていうのと、<Route>で示したページにif(user)のとこで飛ばす処理を知りたいです。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

componentWillMountはコンポーネント作成前の処理。componentDidMountはコンポーネント作成直後。

Routeに飛ばす処理は、this.props.history.push('/somewhere')でできる。
しかし注意が必要で、関数がさらに入れ子担っている場合は、componentWillMount直下でvar self=thisを走らせてself使う必要あり。

投稿2017/10/14 13:47

MOTOMUR

総合スコア195

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問