React中useMutation执行后未触发重渲染问题求助

核心问题1：API请求函数未返回Promise #

你的request.js中，createAnecdote和updateAnecdote函数漏了返回axios请求的Promise，导致React Query的mutation无法获取后端返回的新数据，onSuccess里的参数会变成undefined，根本没法更新缓存：

// 错误写法：没有return请求结果
export const createAnecdote = (newAnecdote) => {
    axios.post(baseUrl, newAnecdote).then(res => res.data)
}

// 修正后：返回Promise
export const createAnecdote = (newAnecdote) => 
    axios.post(baseUrl, newAnecdote).then(res => res.data)

// updateAnecdote同理，必须return请求结果
export const updateAnecdote = (updatedAnecdote) => 
    axios.put(`${baseUrl}/${updatedAnecdote.id}`, updatedAnecdote).then(res => res.data)

核心问题2：缓存更新的QueryKey不匹配 #

投票的updateAnecdoteMutation里，你更新的是单个条目的缓存（['anecdotes', updatedAnecdote.id]），但App组件渲染列表用的是['anecdotes']这个QueryKey对应的缓存数据，所以列表完全没变化。要直接更新整个列表的缓存：

const updateAnecdoteMutation = useMutation({
  mutationFn: updateAnecdote,
  onSuccess: (updatedAnecdote) => {
    queryClient.setQueryData(['anecdotes'], (oldAnecdoteList) => 
      oldAnecdoteList.map(item => 
        item.id === updatedAnecdote.id ? updatedAnecdote : item
      )
    )
  }
})

额外提示：别误用废弃配置 #

你尝试设置的fetchPolicy:'false'是React Query旧版本的废弃配置，新版已经改用staleTime等参数，当前代码里的refetchOnWindowFocus: false是正确的，不需要改动。

把这两处修正后，投票触发PUT请求成功后，缓存会被正确更新，页面就会自动重渲染显示最新票数了。

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