"Rendered more hooks than during the previous render" 钩子初始值为数据库查询结果时出错
"Rendered more hooks than during the previous render" error when the initial value for the hook is a query result from a database
我正在使用 React 的钩子,我想要一个从数据库中检索的值作为初始值。但是,我收到以下错误:
Invariant Violation: Invariant Violation: Rendered more hooks than
during the previous render.
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>
)
}
问题是您正在使用 return 下面的钩子。尝试更新
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>
)
}
我正在使用 React 的钩子,我想要一个从数据库中检索的值作为初始值。但是,我收到以下错误:
Invariant Violation: Invariant Violation: Rendered more hooks than during the previous render.
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>
)
}
问题是您正在使用 return 下面的钩子。尝试更新
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>
)
}