如何使用 useQuery 挂钩在其他挂钩中填充状态?
How can I use the useQuery hook to populate state in other hooks?
我最近一直在处理一些与钩子相关的问题,因为我一直在为我的项目实现钩子。我一直收到错误 "Rendered more hooks than during the previous render."
似乎让我的代码工作的唯一方法是将 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>
}
你照这个方法就可以了,我也是按这个方法做的。
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]);
我最近一直在处理一些与钩子相关的问题,因为我一直在为我的项目实现钩子。我一直收到错误 "Rendered more hooks than during the previous render."
似乎让我的代码工作的唯一方法是将 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>
}
你照这个方法就可以了,我也是按这个方法做的。
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]);