IT技术 - 如何使用 useQuery 钩子填充其他钩子中的状态？ - 吾爱随笔录

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

似乎让我的代码工作的唯一方法是将 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 钩子来用它的查询数据初始化其他值。

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

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]);