React使用Axios删除数据后仅偶尔触发重渲染问题排查

问题根因 #

你的handleDeletion函数存在异步请求执行顺序错误的问题：

• handlePerson.deletion(idToDelete)和handlePerson.getAll()都是异步Axios请求，你当前的写法会让两个请求几乎同时发起，没有等待删除请求执行完成就拉取全量人员列表
• 由于网络请求响应顺序不固定，经常会出现getAll请求先拿到响应（此时删除操作还没执行完，返回的还是包含已删除条目的旧数据），后续删除请求才执行完成，但你不会再触发更新，因此页面不会重渲染，旧条目还留在页面上
• 此时再次点击删除按钮，对应id的数据已经在服务端被删除，自然返回404错误

另外你之前尝试修改的onClick={() => deletionHandler}属于错误写法，相当于点击时只返回函数不执行，你的原始绑定方式onClick={deletionHandler}本身是正确的，不需要调整。

修复方案 #

把拉取全量列表的逻辑放到删除请求的成功回调中，保证删除操作完成后再拉取最新数据，同时注意转换id的类型，避免字符串和数字类型不匹配的问题：

// 修改后的handleDeletion函数
function handleDeletion(event){
  const idToDelete = Number(event.target.value)
  handlePerson
  .deletion(idToDelete)
  .then(() => {
    // 只有删除成功后，再拉取最新列表
    return handlePerson.getAll()
  })
  .then(persons => {
    setPersons(persons)
  })
  .catch(err => {
    alert('删除失败：' + err.message)
  })
}

优化建议（可选） #

你可以不用每次删除后都发起请求拉取全量列表，直接在前端过滤掉已删除的条目即可，减少不必要的网络请求：

function handleDeletion(event){
  const idToDelete = Number(event.target.value)
  handlePerson
  .deletion(idToDelete)
  .then(() => {
    setPersons(persons.filter(p => p.id !== idToDelete))
  })
  .catch(err => {
    alert('删除失败：' + err.message)
  })
}

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