未处理的拒绝(错误)：呈现的钩子比上一次呈现时多(将接口GrandStack与ApolloClient反应)

Question

当我刷新页面时(在本地主机上)，我使用基于GrandStack数据库的Neo4J，并且我想要创建一个带有数据过滤器的表。我使用了正确的代码这里 ( CodeSandBox right 这里上的完整代码)

在我使用我的数据(使用ApolloClient)之前，它非常好地工作。

我在开始时声明以下查询：

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

然后定义const数据并返回下表

  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, [])}

编辑:我还尝试在返回语句之前声明数据，如下所示：

  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} />

但我还是明白错误

我似乎不明白我做错了什么，有人能帮忙吗？非常感谢

Answer 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是一个钩子，必须在返回任何内容之前进行初始化。