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

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

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

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

React.js

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

Q&A

解決済

1回答

703閲覧

react.jsのstateの中身をpropsで渡そうとすると消えてしまう問題について

hfidk

総合スコア18

JavaScript

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

React.js

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

0グッド

0クリップ

投稿2019/04/12 23:10

前提・実現したいこと

reactのimmutabiity-helperで追加したstateの内容をコンポーネントにpropsで渡したいです.
少し複雑な配列を渡そうとしているので,一度他の変数に納めて中身を完成させてからsetStateにてimmutabilyty-helperの$pushを使って配列に追加しようとしました.

その後render時にpropsで渡した先のコンポーネント先でprops.requestを参照しても配列の内容がなくなっており,propsを渡した元のcomponentDidMountでconsole.logで確認しても中身は無いままでした.render内で確認したところstateの中にはまだ入っていたので,どのタイミングでstateの中身が無くなったのかどうしてもわかりません.

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

class EditPage extends Component{ constructor( props ) { super( props ); this.state = { uid: "this.props.uid, data: this.props.data, this_display_stickers: null, setting_config: [] } if(this.state.uid && this.state.data ) { let setting_config = this.state.data.stickers; for (let i = 0; i < setting_config.length; i++) { let request_props = {}; Firebase.firestore().collection('components').doc(setting_config[i].model.user).collection(setting_config[i].model.sticker).doc(setting_config[i].model.version).get() .then((doc) => { console.log(doc.data()); request_props.title = doc.data().name; request_props.config = []; for (let config_index = 0; config_index < doc.data().config.length; config_index++) { let config_obj = doc.data().config[config_index]; request_props.config.push({ 'hint': config_obj.hint, 'initialValue': config_obj.initialValue, 'isShow': config_obj.isShow, 'variable': config_obj.variable }) } console.log("ここでの中身はありました",request_props) this.setState({ setting_config: update(this.state.setting_config, { $push: [ request_props ] }) }) console.log(this.state.setting_config) }) .catch((err) => { console.log(err) }) } } } componentDidMount() { console.log("ここでは無くなっていました", this.state.setting_config) } render(){ console.log(this.state.setting_config) return( <div> <SettingStickerConfig request={this.state.setting_config}/> </div> ); } } export default EditPage;

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

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

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

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

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

guest

回答1

0

ベストアンサー

質問ですが

<<--ココの部分では値はどうなっていましたか?

多分 [] になっていると予想しますが。

js

1 console.log("ここでの中身はありました",request_props) 2 this.setState({ 3 setting_config: update(this.state.setting_config, { 4 $push: [ 5 request_props 6 ] 7 }) 8 }) 9 console.log(this.state.setting_config) <<--ココ

もし、上記部分で [] になっているなら、constractor 内で setState を使わないで記述すれば動くのではないかと思います。

というのも、setState すると render が実行されますが、すぐに state が書き変わるわけではありません。

この辺と似た現象だと思います。
https://stackoverflow.com/questions/40063468/react-component-initialize-state-from-props

以下の様に書き換えたら動くか試してみてください

js

1class EditPage extends Component{ 2 constructor( props ) { 3 super( props ); 4 5 6 // 先にsetting_configを作成 7 if(props.uid && props.data ) { 8 const setting_config = this.state.data.stickers; 9 for (let i = 0; i < setting_config.length; i++) { 10 let request_props = {}; 11 } 12 } 13 14 // stateにセットするのはのconstructor最後で 15 this.state = { 16 uid: props.uid, 17 data: props.data, 18 this_display_stickers: null, 19 setting_config, 20 } 21 } 22 23 ... 24}

投稿2019/04/19 03:08

odyu

総合スコア548

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問