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

Posted 2023-03-10

【中文标题】当钩子的初始值是来自数据库的查询结果时，“比上一次渲染期间渲染的钩子更多”错误

【英文标题】："Rendered more hooks than during the previous render" error when the initial value for the hook is a query result from a database

【发布时间】：2020-04-07 21:26:12

【问题描述】：

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

Invariant Violation: Invariant Violation: 渲染的钩子多于 在上一次渲染期间。

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

我正在使用 React Apollo 钩子。

更新

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>
    )

【问题讨论】：

你能分享你的组件的完整代码吗？

@TuanLuong 我已经包含了完整的代码

【参考方案1】：

问题是你在返回下面使用钩子。尝试更新

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>
    )

【讨论】：

如果 loadingInitialSettings 或 initialSettingsError 为真，则不会呈现您的 borrowerPending。组件内部的所有钩子在每次渲染时都必须相同。

你让我开心，谢谢！

不断给予的礼物.. 感谢您的回复！！