前提・実現したいこと
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;
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。