RangeError：超过最大调用堆栈大小 React Native

Question

我在 React Native 中使用 https://formidable.com/open-source/urql/ 从 GraphQL 服务器获取数据。

组件实现如下：

import React from "react"
import { View, Text } from "react-native"
import { HashtagsProps } from "./types"
import { useQuery } from "urql";

const HashtagsQuery = `
query {
    searchHashtags(input: {pattern: "vegan"}) {
      id
      name
    }
}  
`

export default function Hashtags({ navigation }: HashtagsProps) {

    const [result] = useQuery({
        query: HashtagsQuery
    })

    const { data, fetching, error } = result;

    if (fetching) console.log("loading");
    if (error) console.log(error.message);
    console.log(data)

    return (
        <View>
            <Text>Hashtags</Text>
        </View>
    )

} 

运行应用时，查询按预期工作，我从 GraphQL 服务器接收数据。

但是，控制台显示错误消息：

未处理的承诺拒绝，[RangeError: 最大调用堆栈大小 超过。] 在 node_modules/core-js/internals/host-report-errors.js:5:32 在 module.exports 在 http://192.168.178.27:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:205269:138 在 node_modules/core-js/modules/es.promise.js:163:23 的 dispatchEvent 中 在 perform$argument_0 处 node_modules/core-js/internals/perform.js:3:20 在 module.exports 中 node_modules/core-js/modules/es.promise.js:160:22 在 task.call$argument_1

我使用 expo 版本 ^42.0.0。

我还尝试省略 graphql 查询，如下所示：

export default function Hashtags({ navigation }: HashtagsProps) {

   
    return (
        <View>
            <Text>Hashtags</Text>
        </View>
    )

}

并且错误消息不再出现。

我做错了什么？

Answer 1

您的查询似乎每次都会尝试调用。 你能用 useEffect 包装一次电话吗？ 然后如果你有更新，你可以添加它 useEffect deps。