![](/img/trans.png)
[英]How to use useQuery hook from ReactQuery to update state?
[英]How can I use the useQuery hook to populate state in other hooks?
我最近一直在处理一些与钩子相关的问题,因为我一直在我的一个项目中实施钩子。 我不断收到错误“渲染的钩子比上一次渲染时多”。
似乎让我的代码工作的唯一方法是将 useQuery 钩子放在所有其他钩子之后。 然而,这是一个问题,因为我想用查询数据中的值填充一些状态值。
// 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 钩子来用它的查询数据初始化其他值。
如果这还不够代码或需要更多解释,请告诉我。 谢谢。
您需要做的是在第一个钩子产生响应时更新状态。 为此,您可以使用useEffect
钩子。 您需要在功能组件的顶部呈现所有钩子。
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>
}
你可以简单地按照这个apprch,我也是这样做的。
const client = useApolloClient();
const [newData, setNewData] = useState(null);
const [loading, setLoading] = useState(false);
async function runQuery() {
setLoading(true);
const useQueryData = await client.query({
query: SUBMITTED_ASSIGNMENTS, variables: {
userId
}
});
setNewData(useQueryData?.data?.assignments);
console.log('newData', newData);
setLoading(false);
}
useEffect(() => {
runQuery();
}, [newData]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.