我最近一直在处理一些与钩子(Hook)相关的问题,因为我一直在我的一个项目中实现钩子(Hook)。我不断收到错误“与之前的渲染相比,渲染了更多的钩子(Hook)。”
看来我能让代码正常工作的唯一方法是将 useQuery Hook 放在所有其他 Hook 之后。然而,这是一个问题,因为我想用查询数据中的值填充一些状态值。
// 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>
}
对比
// 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)
我希望 useQuery 钩子(Hook)可以用它的查询数据初始化其他值。
如果这还不够,或者需要更多解释,请告诉我。谢谢。
最佳答案
您需要做的是当第一个钩子(Hook)产生响应时更新状态。为此,您可以使用 useEffect
Hook 。您需要在功能组件的顶部渲染所有钩子(Hook)。
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>
}
关于reactjs - 如何使用 useQuery Hook 来填充其他 Hook 中的状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55472134/