ReactJS：执行函数后组件无法更新，setState不生效问题求助

嘿，我来帮你梳理下这个问题的核心，以及怎么解决它～

首先，咱们先搞清楚为什么你当前的代码会出现这种情况：

• 你调用this.setState({update: true})后组件没更新，是因为你的组件渲染逻辑根本没用到update这个状态字段。React的更新机制是基于「状态变化是否影响渲染输出」来判断的，如果某个state字段没在render里被使用，修改它并不会触发组件重新渲染。
• 而当你改成this.setState({tasks: []})时组件更新了，是因为tasks是你渲染任务列表的数据源，修改它会直接影响渲染结果，所以React会触发重新渲染——只不过你把数据清空了，这显然不是你想要的效果。

问题的关键：异步请求的状态同步 #

你现在的代码里，setState是在发送PUT请求后立刻执行的，但axios的请求是异步的——这时候后端还没完成任务状态的更新，你也没有把最新的任务数据同步到本地state里。正确的做法应该是等请求成功后，再更新本地的tasks状态。

两种可行的解决方案 #

方案一：直接更新本地tasks数组（无需重新请求）

在PUT请求成功的回调里，找到对应id的任务，修改它的状态，然后更新state：

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"}
  })
  .then(() => {
    // 复制原tasks数组，避免直接修改state
    const updatedTasks = this.state.tasks.map(task => {
      if (task.id === id) {
        // 返回修改后的任务对象，保持原对象不变
        return {...task, state: 'finished'};
      }
      return task;
    });
    this.setState({tasks: updatedTasks});
  })
  .catch(function(err){
    console.log(err)
  })
}

这种方式的好处是不用再次请求后端，性能更好，适合简单的状态更新场景。

方案二：重新请求最新的任务列表（更稳妥）

如果你的后端逻辑比较复杂，或者担心本地更新和后端数据不一致，可以在请求成功后重新获取所有任务：

// 先定义一个获取任务的函数
fetchTasks() {
  axios.get('/api/tasks')
    .then(res => {
      this.setState({tasks: res.data});
    })
    .catch(err => console.log(err));
}

// 在componentDidMount里初始化任务
componentDidMount() {
  this.fetchTasks();
}

// 修改markFinished函数
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"}
  })
  .then(() => {
    // 请求成功后重新拉取最新任务
    this.fetchTasks();
  })
  .catch(function(err){
    console.log(err)
  })
}

这种方式适合后端有复杂业务逻辑的场景，确保本地数据和后端完全一致。

总结 #

React是状态驱动UI的框架，只要你正确更新了渲染依赖的state（也就是这里的tasks），UI就会自动同步更新。之前的update字段因为没参与渲染，所以修改它不会有任何效果；而强制刷新页面或者用forceUpdate都是绕开React正常更新机制的做法，确实不推荐。

内容的提问来源于stack exchange，提问作者eymas