更新组件导致其变量未定义（使用 react-query）

Question

我正在使用 dnd-beautiful-kit 来隔离卡片。每张卡片都有一些信息（在视频中显示）和头像组件。 Avatar 可以是图像（如果 avatarSource 存在）或用户的姓名缩写。此外，我正在使用反应查询从后端获取 avatarSource。

请原谅我没有显示完整的、可编辑的代码，但它太大了，无法阅读。组件位于该层次结构中：

const Card = (user) => {
  
  return(
     <div>
       {user.name}
       {user.lastName}

       <Avatar userId={user.id}/>
     </div>
  )
}

const Avatar = (userId) => {
  const [avatarSource, setAvatarSource] = useState();

  useQuery({
    queryKey: ["getAvatar", userId],
    queryFn: () => {
      return getAvatar(userId); //here is fetching by axios
    },
    onSuccess: data => {
      setAvatarSource("data:" + data.contentType + ";base64, " + data.fileContent)
    }

    
  return (
   {avatarSource?
    <img style={avatarStyle} id={style.avatar} src={avatarSource} alt="avatar" />
    :
    <div style={avatarStyle} className={style.initials}>
      {user.initials}
    </div>});}

经过我的调查，我意识到在我将卡片移到另一列后，avatarSource 变得未定义，但用户没有。更重要的是，我通过将它直接传递到来硬编码 avatarSrc 然后就没有闪烁了。

总而言之，我不知道为什么：

react-query 没有捕获缓存值
avatarSource 在更新后变得未定义
如何防止眨眼

video

Answer 1

react-query does not catch cached value

简单地说，因为你没有使用从react-query返回的data，而只是依赖于你不需要的本地状态：

const { data } = useQuery({
  queryKey: ["getAvatar", userId],
  queryFn: () => {
    return getAvatar(userId); //here is fetching by axios
  }
})

const avatarSource = data && "data:" + data.contentType + ";base64, " + data.fileContent

这与以前几乎相同，只是没有本地状态。

当 userId 更改时，您将获得一个新的缓存条目，这意味着 data 将是 undefined，状态将是 loading。为避免这种情况，您可以将 keepPreviousData: true 传递给 react-query 选项。

更新组件导致其变量未定义（使用 react-query）

Updating component causes its variable to be undefined (with react-query)

javascript

reactjs

drag-and-drop

react-query