如何删除表格特定行？React删除行后需刷新才更新页面渲染

当前删除逻辑只完成了后端接口调用，没有同步修改组件/全局状态中存储表格行数据的内容。React 的页面渲染完全依赖状态变更触发，状态值没有改变时，组件不会执行重新渲染流程，自然要手动刷新页面才能从后端拉到最新数据。

核心是在删除接口请求成功的回调中，从本地存储的表格数据列表里过滤掉对应row_id的行，生成新的数组替换原有状态，触发表格重新渲染。

类组件写法参考 #

deleteFromDb(row_id) {
    fetch('/deleteNotes', {
      method: 'post',
      headers: {'Content-Type':'application/json', 'Accept': 'application/json'},
      body: JSON.stringify({id: row_id}),
    })
    .then(res => {
      // 补全接口异常判断，避免静默失败
      if (!res.ok) throw new Error('删除接口请求异常')
      return res.json()
    })
    .then(() => {
      // 接口删除成功后，基于旧状态生成过滤后的新列表，更新state
      this.setState(prevState => ({
        notesList: prevState.notesList.filter(item => item.id !== row_id)
      }))
    })
    .catch(error => {
      console.error('删除失败：', error);
    }) 
}

函数组件写法参考 #

如果是基于Hooks的组件实现，逻辑完全一致，替换对应的状态更新方法即可：

const deleteFromDb = (row_id) => {
    fetch('/deleteNotes', {
      method: 'post',
      headers: {'Content-Type':'application/json', 'Accept': 'application/json'},
      body: JSON.stringify({id: row_id}),
    })
    .then(res => {
      if (!res.ok) throw new Error('删除接口请求异常')
      return res.json()
    })
    .then(() => {
      setNotesList(prevList => prevList.filter(item => item.id !== row_id))
    })
    .catch(error => {
      console.error('删除失败：', error);
    }) 
}

• 必须生成全新的数组做状态更新，不要直接通过splice、索引赋值等方式修改原state中的数组，否则React的浅比较检测不到状态变更，依然不会触发重渲染。
• 状态更新逻辑一定要放在接口成功的回调分支里，不要在请求发出时就提前修改本地数据，避免接口调用失败时本地数据和数据库状态不一致。
• 如果使用Redux、Zustand等外部状态管理工具，逻辑本质相同：接口确认删除成功后，从状态存储的列表数据中移除对应行，触发订阅该状态的视图更新。

内容的提问来源于stack exchange，提问作者B.Y.