推送钩子 useHistory 后，我得到“警告：React 检测到 ... 调用的钩子顺序发生了变化”答案

【问题标题】：After pushing hook useHistory I get ' Warning: React has detected a change in the order of Hooks called by ...'推送钩子 useHistory 后，我得到“警告：React 检测到 ... 调用的钩子顺序发生了变化”
【发布时间】：2021-04-30 04:27:41
【问题描述】：

我在一个页面 localhost:8080/authors/1

我发了一个帖子，当我发帖时，我得到了一个新的 id 2。有了这个新 id，我想从 localhost:8080/authors/1 跳转到页面 localhost:8080/authors/2。

在作者表单中：

import {useHistory} from 'react-router-dom';
const history = useHistory()
const onSubmit = async data => {
    const response = await onUpdateData({author: data});
    history.push(`/authors/${response?.data?.createAuthor?.id}`);
  }

在 localhost:8080/authors/:id 我使用 useParams() 来获取 id

    const authorId = useParams()?.id;    
          const { loading, error, data } = useQuery(fetchAuthor, {
                variables: {id: authorId} })
                if(loading) {
                  return(<div> Loading </div>)
                }
                if(error) {
                  return(<div> error </div>)
                }
                  return (<AuthorForm initialValues={formTranslator(data)}/>);
        
            }

推送钩子 useHistory 后，我得到 'react_devtools_backend.js:2430 警告：React 检测到由 'x' 调用的 Hooks 的顺序发生了变化。如果不修复，这将导致错误和错误。如需更多信息，请阅读 Hooks 规则

【问题讨论】：

标签： reactjs react-hooks react-router-dom

【解决方案1】：

我发现很难使用 apollo useQuery。改用 ApolloClient 和 useEffects 问题就消失了，从现在开始我在使用 useQuery 时会非常小心。

【讨论】：

【解决方案2】：

解决方案是在 useQuery 中添加跳过

【讨论】：