当前位置: 首页 > 知识库问答 >
问题:

“呈现的钩子比上一次呈现期间更多”错误,当钩子的初始值是来自数据库的查询结果时

壤驷坚
2023-03-14

我正在使用 React 的钩子,我希望有一个从数据库中检索到的值作为初始值。但是,我收到以下错误:

不变冲突:不变冲突:与上一次渲染相比,渲染的钩子更多。

const { data, loading, error } = useQuery(GET_DATA)
const { initialValue } = data
const [value, setValue] = useState(initialValue)

我用的是反应阿波罗钩。

更新

export default NotificationScreen = ({ navigation }) => {
    const { data: initialNotificationSettings, loading: loadingInitialSettings, error: initialSettingsError } = useQuery(GET_NOTIFICATION_SETTINGS)
    if (loadingInitialSettings) {
        return (
            <View style={[styles.container, styles.horizontal]}>
                <ActivityIndicator size="large" color="#FF5D4E" />
            </View>
        )
    }
    if (initialSettingsError) return <Text>Error...</Text>

    const {
        borrowerLendingNotificationToken,
    } = initialNotificationSettings.me
    const [borrowerPending, notifyBorrowerPending] = useState(borrowerLendingNotificationToken)

    return (
        <SafeAreaView style={styles.container}>
        </SafeAreaView>
    )
}

共有1个答案

闽高峯
2023-03-14

问题是你在return下面用了hook。尝试更新

export default NotificationScreen = ({ navigation }) => {
    const { data: initialNotificationSettings, loading: loadingInitialSettings, error: initialSettingsError } = useQuery(GET_NOTIFICATION_SETTINGS)

    const [borrowerPending, notifyBorrowerPending] = useState("")

    useEffect(() => {
        if (initialNotificationSettings.me) {
            const { borrowerLendingNotificationToken } = initialNotificationSettings.me
            notifyBorrowerPending(borrowerLendingNotificationToken);
        }
    }, [initialNotificationSettings]);

    if (loadingInitialSettings) {
        return (
            <View style={[styles.container, styles.horizontal]}>
                <ActivityIndicator size="large" color="#FF5D4E" />
            </View>
        )
    }
    if (initialSettingsError) return <Text>Error...</Text>

    return (
        <SafeAreaView style={styles.container}>
        </SafeAreaView>
    )
}
 类似资料:
  • 一个组件,它呈现已填好的表单的预览,当您单击左侧的表单时,它会在右侧显示它们。 第一个handleSwitchReview向我抛出了React钩子,所呈现的钩子比上一个呈现错误时要多 第二个不是。当我控制台日志道具,例如,我得到他们4-5次时,第一个函数的视图显示,但没有第二次,第二次只显示1次在控制台日志。 尝试移动setState并在控制台中记录父组件,但这个组件是唯一一个启动了很多次并中断的

  • 我有一个组件,我在其中调用我的自定义钩子。 自定义钩子如下所示: 而我在其中使用的导致错误的组件是: 有什么想法吗?

  • 我目前正在实现useSWR,以便从我的express和mongo-db后端获取数据。我能够顺利地从数据库中提取数据没有问题。下面是我用来实现这一点的代码: 然后通过以下方式访问: ,其中username是集合中的一个字段。 当我尝试将此信息添加到状态钩子中时,问题就出现了,然后状态钩子返回的错误呈现的钩子比上一次呈现的钩子要多。 删除行:和使用状态变量displayNumber的任何行就可以完全修

  • 我能用钩子解决这个问题吗? 为什么它不能正常工作? 我开始使用REACT DND,在我尝试使用拖放后,所有的事情都出了问题。 我将其用作依赖项: > “@testing-library/jest-dom”:“^4.2.4”, "@testing-library/react":"^9.5.0", 已部署项目-hunger-tree.surge.sh src/components/todos/crea

  • 我有一个组件看起来是这样的(非常简化的版本): 加载使用此组件的页面时,出现以下错误:我试图找到此错误的解释,但搜索未返回任何结果。 当我稍微修改组件时: 我再也不知道那个错误了。是因为我在由返回的jsx中包含了函数吗?如果能有一个解释为什么修复是有效的,那就太好了。

  • 如何将 2 个 graphql 查询与 react-apollo-hooks 结合使用,其中第 2 个查询依赖于从第 1 个查询中检索到的参数? 我尝试使用如下所示的两个查询: 然而,当我运行我的项目时,react-hooks给我以下消息: " index.js:1437警告:React检测到Upgrade调用的挂钩顺序发生了变化。如果不修复,这将导致错误和错误。有关更多信息,请阅读“挂钩规则”