ReactJS: Reloading component after function is executed?

Question

In the quest to make a to-do application in order to get more familar with API's, CRUD and React, I've encountered a slight roadblock on reloading the component(s) after executing a function.

The case is as following:

Tasks get displayed
User can press button to mark task as finished
Task is marked as finished (This is already working)
Button gets changed to "Mark unfinished" (This doesn't fire)

At the moment I use window.location.reload() to force each component to update after pressing the "mark finished" button, however I know that refreshing the entire page upon this is rather unnecessary, and to my understanding voids the whole reason of using javascript and react.

As such, I should be using this.setState() to do this instead, but it is not working without any explanation why. Neither would this.forceUpdate() which is discouraged to begin with.

The code is as following:

constructor(){
  super();
  this.state = {
    tasks: [],
    update: false
  }; 

  this.markFinished = this.markFinished.bind(this);
  this.update = this.update.bind(this);
}

markFinished(id, title, content){
  axios.put('/api/tasks/'+id, querystring.stringify({
    task_id: id,
    title: title,
    content: content,
    state: 'finished'
  }),{
    headers: {"Content-Type": "application/x-www-form-urlencoded"}
  })
  .catch(function(err){
    console.log(err)
  })
  this.setState({update: true}); 
}

Is there something that I would be missing in this implementation of setState? Oddly enough if I replace update: true with tasks: [] it will update, but remove the entire tasks array as result. prompting me that it -does- function as it should.

cbll · Accepted Answer · 2018-01-04 18:07:36Z

5

You are running an async function with axios.put, so your update: true is executed before axios.put returns the promise, you likely want to do a .then(//set the state here) on success.

So, something along this line:

let that = this;
axios.put('/api/tasks/'+id, querystring.stringify({
    task_id: id,
    title: title,
    content: content,
    state: 'finished'
  }),{
    headers: {"Content-Type": "application/x-www-form-urlencoded"}
  })
  .then(function(success) {
    that.setState({update: true})
   }
  .catch(function(err){
    console.log(err)
  })

On success of your axios.put the state will be updated and your page should re-render.

edited Jan 4, 2018 at 18:07

answered Jan 4, 2018 at 13:54

cbll

7,33929 gold badges83 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

eymas Over a year ago

strangely enough, it returns "this is undefined" despite that i've bound the function in the constructor already.

Collectives™ on Stack Overflow

ReactJS: Reloading component after function is executed?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related