未处理的拒绝（错误）：渲染的钩子比上一次渲染时更多（React Interface GrandStack with ApolloClient）

Posted 2023-03-10

【中文标题】未处理的拒绝（错误）：渲染的钩子比上一次渲染时更多（React Interface GrandStack with ApolloClient）

【英文标题】：Unhandled Rejection (Error): Rendered more hooks than during the previous render (React Interface GrandStack with ApolloClient)

【发布时间】：2021-10-15 16:26:23

【问题描述】：

刷新页面时总是出现错误（在本地主机上） 我使用基于 Neo4J 数据库的 GrandStack React 接口，我想创建一个带有数据过滤器的表。 我使用了在here 找到的代码（CodeSandBox 上的完整代码在here）

在我使用我的数据（使用 ApolloClient）之前它工作得非常好

我在开头声明如下查询：

const GET_INSTANCE = gql`
  
    finalTab 
      classObject
      object
      classSubject
      subject
      relation
    
  
`

然后我定义const data并返回下表

  const  loading, error, data  = useQuery(GET_INSTANCE)
  return (
    <Paper>
      loading && !error && <p>Loading...</p>
      error && !loading && <p>Error</p>
      data && !loading && !error && (
        <Table
          columns=columns
          data=React.useMemo(() => data.finalTab, [])
        />
      )
    </Paper>
  )

它确实可以工作并且可以编译，但是一旦我刷新页面，它就会显示以下错误：

未处理的拒绝（错误）：渲染的钩子比上一次渲染时更多。

它指向这条线：data=React.useMemo(() => data.finalTab, [])

编辑： 我还尝试在return语句之前声明数据如下：

  const  loading, error, data  = useQuery(GET_INSTANCE)
  if (error) return <p>error</p>
  if (loading) return <p>Loading...</p>
  const instances = data.finalTab
  const data1 = React.useMemo(() => instances, [])

然后只返回表格：

  return <Table columns=columns data=data1 />

但我仍然得到错误

而且我似乎无法理解我做错了什么， 有人可以帮忙吗？ 非常感谢

【参考方案1】：

  const  loading, error, data  = useQuery(GET_INSTANCE)
  const finalTab = React.useMemo(() => data.finalTab, [])
  return (
    <Paper>
      loading && !error && <p>Loading...</p>
      error && !loading && <p>Error</p>
      data && !loading && !error && (
        <Table
          columns=columns
          data=finalTab
        />
      )
    </Paper>
  )

useMemo 是一个钩子，必须在返回任何内容之前进行初始化。

【讨论】：

感谢您的回复，但我不确定我是否明白您的意思，当我在 React 文档中查找 useMemo 时，我没有看到 useMemo 初始化的任何语法，我该如何初始化它钩子？

使用钩子时：useEffect / useCallback / useMemo 等......它应该总是在返回任何东西之前。否则你会在你的标题中得到错误。只需将您的 useMemo 放在您的 useQuery 下方（就像在我的示例中一样）。

从反应文档中，您不能使用带有条件运算符的钩子。 reactjs.org/docs/hooks-overview.html#rules-of-hooks这就是为什么你应该在退货之前把你的钩子放好。