React使用JSON-server删除列表项后需刷新页面才生效如何解决

根因分析 #

• 调用删除接口成功后你没有主动更新本地的user状态，React只有触发状态更新才会重新渲染列表，此时本地存储的还是删除前的旧数据，所以界面不会变化。刷新页面会触发组件重新挂载，useEffect重新拉取最新数据列表才会正常展示删除后的结果。
• 你之前加filter不生效，大概率是没有使用函数式更新，直接基于当前作用域下的user变量做过滤，受闭包影响拿到的不是最新的状态值，导致更新失败。

修复方案 #

有两种常用的修复方式，按需选择即可：

方案1：直接过滤本地状态（性能更优） #

删除接口调用成功后，直接过滤掉本地状态中对应id的条目，不用额外发起请求：

const deleteUser = id => {
  axios
    .delete(`${URL}/${id}`)
    .then(() => {
      console.log(' deleted id is:', id)
      // 使用函数式更新拿到最新的状态值再过滤
      setUser(prevUser => prevUser.filter(item => item.id !== id))
    })
}

方案2：删除成功后重新拉取全量数据（适合多端同步场景） #

如果你的数据可能被其他用户/端修改，删除后重新拉取接口的最新数据即可：

// 把拉取用户的逻辑抽成单独函数复用
const fetchUsers = () => {
  axios.get(URL).then(response => {
    setUser(response.data)
  })
}

useEffect(() => {
  fetchUsers()
}, [])

const deleteUser = id => {
  axios
    .delete(`${URL}/${id}`)
    .then(() => {
      console.log(' deleted id is:', id)
      // 重新拉取最新数据
      fetchUsers()
    })
}

完整修改后代码 #

import axios from 'axios'
import React, { useState, useEffect } from 'react'

import UserList from './UserList'

const URL = 'http://localhost:8000/user'

function App() {
  const [user, setUser] = useState(null)

  const fetchUsers = () => {
    axios.get(URL).then(response => {
      setUser(response.data)
    })
  }

  useEffect(() => {
    fetchUsers()
  }, [])

  const deleteUser = id => {
    axios
      .delete(`${URL}/${id}`)
       .then(() => {
        console.log(' deleted id is:', id)
        // 此处替换为方案1或者方案2的逻辑都可以，下面是方案1的写法
        setUser(prevUser => prevUser.filter(item => item.id !== id))
      })
  }

  if (!user) return null

  return (
    <div className="app">
      <UserList user={user} deleteUser={deleteUser} />
    </div>
  )
}

export default App

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