如何使用 useQuery 钩子填充其他钩子中的状态? [英] How can I use the useQuery hook to populate state in other hooks?

问题描述

我最近一直在处理一些与钩子相关的问题，因为我一直在我的一个项目中实施钩子.我不断收到错误渲染的钩子比上一次渲染时更多."

似乎让我的代码工作的唯一方法是将 useQuery 钩子放在所有其他钩子之后.然而，这是一个问题，因为我想用查询数据中的值填充一些状态值.

//不会出错的代码，但无法使用查询值初始化状态const [url, setUrl] = useState('')const updateLink = useMutation(LINK_UPDATE_MUTATION, {变量:{id: props.id,网址}})const { 数据，加载，错误 } = useQuery(LINK_QUERY, {变量:{id:道具.id}})如果(加载){返回<div>加载中...</div>}如果(错误){返回 
 错误！{error.message}
}

对比

//出现渲染的钩子数比上一次渲染时更多"的错误代码.const { 数据，加载，错误 } = useQuery(LINK_QUERY, {变量:{id:道具.id}})如果(加载){返回<div>加载中...</div>}如果(错误){返回 
 错误！{error.message}
}const updateLink = useMutation(LINK_UPDATE_MUTATION, {变量:{id: props.id,网址}})const [url, setUrl] = useState(data.link.url)

我希望可以使用 useQuery 钩子来用查询数据初始化其他值.

如果这还不够代码或需要更多解释，请告诉我.谢谢.

解决方案

您需要做的是在第一个钩子产生响应时更新状态.为此，您可以使用 useEffect 钩子.您需要在功能组件的顶部渲染所有钩子.

const [url, setUrl] = useState('')const updateLink = useMutation(LINK_UPDATE_MUTATION, {变量:{id: props.id,网址}})const { 数据，加载，错误 } = useQuery(LINK_QUERY, {变量:{id:道具.id}})useEffect(() => {如果(数据&&数据链接){setUrl(data.link.url);}}， [数据])如果(加载){返回<div>加载中...</div>}如果(错误){返回 
 错误！{error.message}
}

I have been dealing with a few hook-related issues recently as I have been implementing hooks into a project of mine. I keep getting the error "Rendered more hooks than during the previous render."

It seems that the only way I can get my code to work is by putting the useQuery hook after all of the other hooks. This is a problem however as I want to populate some values of state with values from data on the query.

// code that doesn't error, but am not able to initialize state with query values

const [url, setUrl] = useState('')

const updateLink = useMutation(LINK_UPDATE_MUTATION, {
  variables: {
    id: props.id,
    url
  }
})

const { data, loading, error } = useQuery(LINK_QUERY, {
  variables: {
    id: props.id
  }
})

if (loading) {
  return <div>Loading...</div>
}
if (error) {
  return <div>Error! {error.message}</div>
}

vs

// code that errors with 'Rendered more hooks than during the previous render.'

const { data, loading, error } = useQuery(LINK_QUERY, {
    variables: {
      id: props.id
    }
  })

  if (loading) {
    return <div>Loading...</div>
  }
  if (error) {
    return <div>Error! {error.message}</div>
  }

const updateLink = useMutation(LINK_UPDATE_MUTATION, {
    variables: {
      id: props.id,
      url
    }
  })

const [url, setUrl] = useState(data.link.url)

I would expect that the useQuery hook could be used in a way to initialize other values with its query data.

If this isn't enough code or more explanation is needed just let me know. Thanks.

解决方案

What you need to do is to update the state when the first hook results in a response. To do that you can make use of useEffect hook. You need to render all hooks at the top of your functional component.

const [url, setUrl] = useState('')

const updateLink = useMutation(LINK_UPDATE_MUTATION, {
  variables: {
    id: props.id,
    url
  }
})

const { data, loading, error } = useQuery(LINK_QUERY, {
  variables: {
    id: props.id
  }
})

useEffect(() => {
  if(data && data.link) {
    setUrl(data.link.url);
  }
}, [data])

if (loading) {
  return <div>Loading...</div>
}
if (error) {
  return <div>Error! {error.message}</div>
}

这篇关于如何使用 useQuery 钩子填充其他钩子中的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！