0

I feel like I am missing something probably pretty silly. I have a modal form pop up if a user wants to change their avatar photo. And the the function is running and updating my database, it just gets messed up when I'm changing the state ... so here is the function to handle the modal submit:

  onModalSubmit: function () {
    let data = new FormData();

    data.append('id', this.state.user._id)
    data.append('image', this.refs.image.files[0])

    axios.patch('/api/userphoto', data, {
      'Content-Type': 'multipart/form-data'
    }).then(function (response) {

      console.log(response);

      window.localStorage.setItem('user', JSON.stringify(response.data.user));

      this.setState({ user: response.data.user, modalIsOpen: false });

    }).catch(function (error) {

      console.log(error);

    })

  }

And here is the modal:

  <Modal
    isOpen={this.state.modalIsOpen}
    onAfterOpen={this.afterOpenModal}
    onRequestClose={this.closeModal}
    style={customStyles}
    contentLabel="Change Photo"
  >

    <h2>Change Photo</h2>
    <div className="field">
      <div className="ui center icon input">
        <input type="file" name="image" ref="image"/>
        <button className="ui button" onClick={this.closeModal}>Cancel</button>
        <button className="ui button" onClick={this.onModalSubmit}>Submit</button>
      </div>
    </div>

  </Modal>

I have tried binding this function inline, and in constructor as well ... but it just tells me another error that it's already bound to component.

Again, the function is working, it just gets hung up on the this.setState after the response from the server.

Any help appreciated, thanks!

Taylor King
  • 791
  • 4
  • 9
  • 22
  • 2
    what happens if you do var self = this at the top of your function and use self.setState(...) instead? I suspect it may be your usage of the "this" keyword inside of the patch function. – maembe Feb 01 '17 at 21:26
  • Oh crazy ... i did put var self = this at the top and that fixes the problem. That is very perplexing though, and I'm still slightly confused by that. I guess it works though. – Taylor King Feb 01 '17 at 21:29
  • 1
    "this" is going to be different based on the scope and context that it's called in. By doing var self = this, you're storing the current "this" in the self variable permanently, so self will always be the this that it was when the function was defined. – maembe Feb 01 '17 at 21:38
  • you can also use arrow functions. This will not change the context of the this key word, and ultimately not require var self = this. – Chaim Friedman Feb 01 '17 at 22:08

1 Answers1

0

I have tried binding this function inline, and in constructor as well ... but it just tells me another error that it's already bound to component.

You are using the syntax of React.CreateClass factory. I know this from your previous post.

In there you don't need to bind methods. They are already bound.

Check the full answer from here.

enter image description here

Community
  • 1
  • 1
prosti
  • 42,291
  • 14
  • 186
  • 151