Home>

I want to pass the contents of the state added by immutabiity-helper of react to the component by props.
I'm trying to pass a slightly complicated array, so I put it in another variable once to complete the contents, and then tried to add it to the array using $push of immutabilyty-helper with setState.

After that, even if I referred to props.request at the destination component passed by props at the time of render, the contents of the array disappeared, and even if I checked it with console.log with the original componentDidMount that passed props, the contents remained empty. .. When I checked it in the render, it was still in the state, so I just can't tell when the state was lost.

Error message
Corresponding source code
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 ("There was content here", 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 ("Lost here", this.state.setting_config)
  }
  render () {
    console.log (this.state.setting_config)
    return (
      
      <SettingStickerConfig request = {this.state.setting_config} />
      
    );
  }
}
export default EditPage;
  • Answer # 1

    I have a question

    <<--hereWhat was the value in the part of?

    Maybe[]I expect it to be.

              console.log ("There was content here", request_props)
                this.setState ({
                  setting_config: update (this.state.setting_config, {
                    $push: [
                      request_props
                    ]
                  })
                })
                console.log (this.state.setting_config)<<--here

    If it is [] in the above part,constractorAt the innersetStateI think that it will work if you write it without using.

    After all, setState will render, but the state will not be rewritten immediately.

    I think it's a similar phenomenon to this area.
    https://stackoverflow.com/questions/40063468/react-component-initialize-state-from-props

    Please try to see if it works if you rewrite it as follows

    class EditPage extends Component {
      constructor (props) {
        super (props);
        // Create setting_config first
        if (props.uid&&props.data) {
          const setting_config = this.state.data.stickers;
          for (let i = 0;i<setting_config.length;i ++) {
            let request_props = {};
          }
        }
        // Set to state at the end of the constructor
        this.state = {
          uid: props.uid,
          data: props.data,
          this_display_stickers: null,
          setting_config,
        }
      }
      ...
    }