React筛选状态未重新渲染问题排查

让我来帮你拆解这个问题，其实是两个小细节导致了状态不更新的情况：

1. 后端响应未正确结束，导致前端请求挂起 #

你的后端删除函数里，只设置了res.status(204)但没有发送响应结束信号。在Express中，仅仅设置状态码不会自动完成响应，请求会一直处于pending状态直到超时。这就意味着前端的axios.delete请求永远不会resolve，.then()里的setState自然也就不会执行。

修复后端代码很简单，把状态码设置和响应结束合并：

exports.deleteStudent = async (req, res) => {
  try {
    await Student.findByIdAndRemove(req.params.studentId)
    // 用sendStatus直接设置状态码并结束响应
    res.sendStatus(204)
  } catch (e) {
    console.log(`Error: ${e}`)
    // 出错时返回错误响应，避免前端请求挂起
    res.status(500).json({ error: e.message })
  }
}

2. 前端混用await和.then()的冗余写法（可选优化） #

你的前端代码同时使用了await和.then()，虽然语法合法，但容易导致逻辑混乱，也不利于调试。建议统一成更清晰的await风格，同时改用prevState更新状态（避免异步状态更新的旧值问题）：

handleDelete = async studentId => {
  try {
    // 等待删除请求完成
    await axios.delete(`/students/${studentId}`)
    // 基于最新状态更新列表
    this.setState(prevState => ({
      students: prevState.students.filter(student => student._id !== studentId)
    }))
  } catch (e) {
    console.log(`Error: ${e}`)
  }
}

验证效果 #

修复这两点之后，前端的删除请求会正常收到响应，setState会被及时调用，页面就能正确渲染更新后的学生列表了。

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