ReactJS：执行函数后重新加载组件？

Question

为了更好地熟悉API，CRUD和React，我在创建一个待办事项的过程中，在执行一个函数后重新加载组件时遇到了一些小问题。

案例如下：

1. 任务显示
2. 用户可以按按钮将任务标记为已完成
3. 任务标记为已完成（这已经工作）
4. 按钮变为“马克未完成”（这不会触发）

目前我使用window.location.reload()强制按下“标记完成”按钮后更新每个组件，但是我知道刷新整个页面是相当不必要的，并且据我所知，使用javascript和反应的全部原因无效。

因此，我应该使用this.setState()这样做，但它没有任何解释为什么没有工作。也不鼓励this.forceUpdate()开始。

代码如下：

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}); 
}

在这个setState实现中有什么我会遗漏的吗？奇怪的是，如果我用update: true替换tasks: []它将更新，但结果删除整个任务数组。提醒我它 - 它应该起作用。

Answer 1

您正在使用axios.put运行异步函数，因此在update: true返回promise之前执行axios.put，您可能希望在成功时执行.then（//在此设置状态）。

所以，沿着这条线：

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)
  })

在您的axios.put成功后，状态将会更新，您的页面应该重新呈现。