0

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

在我使用我的数据之前它工作得很好（使用 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, [])}

编辑：我还尝试在 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} />

但我仍然收到错误

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

4

1 回答 1

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是一个钩子，必须在返回任何东西之前初始化。

于 2021-08-12T09:54:06.297 回答