Question

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

案例如下：

任务显示
用户可以按按钮将任务标记为已完成
任务标记为已完成（已经可以使用）
按钮变为“马克未完成”（这不会触发）

目前我在按下“标记完成”按钮后使用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返回承诺之前执行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成功，状态将会更新，您的网页应重新呈现。

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

1 个答案: