CRUD操作后如何触发React前端重渲染？通讯录应用问题

嘿，我瞅见你这通讯录应用的删除功能后端已经生效，但前端没跟着更新，这事儿我熟！核心问题很简单：你删除数据后没有更新前端的persons状态，React只有在状态变化时才会触发组件重渲染，所以咱们得调整下删除后的逻辑。

方案一：删除后直接更新本地状态（推荐，减少一次请求） #

这个方案不需要重新请求接口，直接在前端过滤掉已删除的项更新状态，效率更高。

修改步骤： #

1. 在AppPhoneBook组件中添加一个处理删除的回调函数：

const handleDelete = (deletedId) => {
  // 过滤掉被删除ID对应的联系人，生成新数组更新状态
  setPersons(persons.filter(person => person.id !== deletedId))
}

2. 把这个回调函数传给Numbers组件（修改row函数）：

const row = () => nameToShow.map(person => 
  <Numbers 
    key={person.id}  // 划重点！别用uuidv4当key，用person.id才稳定，避免不必要重渲染
    person={person.name} 
    number={person.number} 
    id={person.id} 
    onDelete={handleDelete}  // 传递删除回调
  />
)

3. 调整Numbers组件的deleteName函数，调用回调更新状态：

const deleteName = () =>{
  // 加判断，用户点取消就终止删除流程
  if(!window.confirm(`Delete ${person} ?`)) return

  phoneService
    .deleteName(id)  // 接口不需要传newObject，后端只需要ID，你的apiMethod里也没用到第二个参数
    .then(response => {
      console.log(response)
      // 调用父组件的回调，更新前端状态
      onDelete(id)
    })
    .catch(error => {
      // 加个错误提示，比如联系人已被其他操作删除
      alert(`${person} 已经被删除了`)
    })
}

方案二：删除后重新拉取全部数据（适合多端修改数据的场景） #

如果你的通讯录可能被其他设备或用户修改，删除后重新拉取最新数据会更稳妥：

修改步骤： #

1. 在AppPhoneBook中把数据拉取逻辑抽成独立函数：

const fetchPersons = () => {
  phoneService
    .getAll()
    .then(response => {
      setPersons(response.data)
    })
}

// 初始加载调用
useEffect(()=>{
  fetchPersons()
}, [])

2. 把fetchPersons传给Numbers组件：

const row = () => nameToShow.map(person => 
  <Numbers 
    key={person.id}
    person={person.name} 
    number={person.number} 
    id={person.id} 
    fetchPersons={fetchPersons}
  />
)

3. 在Numbers的deleteName里调用拉取函数：

const deleteName = () =>{
  if(!window.confirm(`Delete ${person} ?`)) return

  phoneService
    .deleteName(id)
    .then(response => {
      console.log(response)
      // 重新拉取最新数据，更新状态
      fetchPersons()
    })
}

额外优化提醒 #

• 立刻停止用uuidv4()做列表key：每次渲染都会生成新的uuid，React会误判为新组件，导致无意义的重渲染，用person.id才是正确选择。
• 删掉没用的refresh函数：它只是打印日志，完全起不到更新状态的作用。

这样修改后，删除联系人后前端状态会同步更新，组件自然就会重渲染啦！

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