React Native:钩子只能在函数组件的主体内调用
React Native是一种用于构建跨平台移动应用程序的开源框架。它允许开发人员使用JavaScript和React编写一次代码，然后可以在iOS和Android等多个平台上运行。
钩子（Hooks）是React Native中的一种特性，它允许开发人员在函数组件中使用状态和其他React特性。钩子只能在函数组件的主体内调用，这意味着它们不能在函数组件的主体外部或其他非函数组件中使用。
使用钩子可以使函数组件具有类组件的功能，例如状态管理、生命周期方法等。React Native提供了一些常用的钩子，例如useState用于管理组件的状态，useEffect用于处理副作用等。
钩子的优势在于它们使得组件的逻辑更加清晰和可复用。通过将相关的逻辑组织在一起，开发人员可以更容易地理解和维护代码。此外，钩子还可以帮助开发人员避免类组件中常见的问题，例如this绑定和生命周期方法的复杂性。
React Native中使用钩子的应用场景非常广泛。例如，可以使用useState钩子来管理表单输入的状态，使用useEffect钩子来处理网络请求或订阅事件，使用useContext钩子来实现全局状态管理等。
腾讯云提供了一些与React Native相关的产品和服务，例如云函数SCF（Serverless Cloud Function）用于支持React Native应用的后端逻辑，云数据库COS（Cloud Object Storage）用于存储React Native应用的数据，云网络VPC（Virtual Private Cloud）用于构建安全可靠的网络环境等。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
在我的react本机应用程序中，我已经开始使用自定义钩子，我创建了一个钩子来检索用户坐标，但是当我的useGeolocation钩子被调用时(在handleUpdateLocation方法中)，我总是收到以下警告：
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of Rea
浏览 14提问于2022-09-06得票数 -1
我试图理解在useSelector中使用_bootstrapAsync的区别在于它以这种方式失败了
import React, { useEffect,useState } from "react";
import { useSelector } from 'react-redux'
import { ActivityIndicator, StatusBar, View, Text } from "react-native";
export default function authLoading({ navigation }) {
浏览 0提问于2019-12-09得票数 0
我被困在无效的钩子警告。这是一个第三方依赖，这也使得它难以控制。但这是一个引起问题的密码，
export class Component {
constructor() {
this._initReact();
}
_initReact(displayName) {
const component = React.forwardRef((props = {}, ref) => {
const _a = Object.assign(Object.assign({}, this._props), props),
浏览 3提问于2021-06-12得票数 0
回答已采纳
3回答
ExceptionsManager.js:179错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器的版本不匹配(例如React )。
你可能违反了胡克斯的规则
在同一个应用程序中，可能有多个React副本。
在Playbutton组件中获取此错误
Playbutton.js
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState, useRef } from "
浏览 8提问于2022-03-14得票数 0
1回答
MOBX和反应集成
、、、、
在重新编写客户端应用程序时出现有效的钩子错误.(升级代码)
mobx 6.3.8 mobx反应7.2.1，mobx状态树5.0.5反应17.0.1 RN 0.64.3。
我觉得错误就在这里。我搜索了使用商店的代码行，它让我找到了不推荐的网站.我不知道在哪里可以在站点中找到新的处理方法.这叫什么？
import { createContext, useContext } from "react"
import { RootStore } from "./root-store"
const RootStoreContext = createContext<
浏览 14提问于2022-01-07得票数 0
回答已采纳
我在React Native应用程序中尝试获得准确的计时时遇到了一个问题。下面是我的问题的一个基本版本。 我可以通过使用setTimeout让它工作，但是它不准确，我正在尝试使用useTimer，这是一个精确的计时器。但是，当我在useEffect中而不是在组件主体中创建计时器时，我得到了一个Invalid Hook Call, Hooks can only be called inside the body of a function component 正在努力寻找解决这个问题的方法。 import React from "react";
import { View, T
浏览 84提问于2021-08-29得票数 0
我有一个，这里我使用mobx ("mobx- React "："^6.1.8")并使用。
我得到了错误:无效的钩子调用。只能在函数组件的主体内调用钩子。
商店index.js
import { useContext } from "react";
import UserStore from "./UserStore";
import SettingsStore from "./SettingsStore";
const useStore = () => {
return {
UserStore
浏览 5提问于2020-03-10得票数 1
我试着把这个应用程序作为一个项目，因为我刚刚学会了Reactive原住民，而且我已经毫无问题地走了这么远，但是我一直在处理这个钩子问题：
未登录错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
，您可能有React的不匹配版本，而呈现器(如React )，您可能违反了Hooks的规则，在同一个应用程序中可能有多个React副本，有关如何调试和修复此问题的提示，请参见。在webpack_require的resolveDispatcher (react.development.js:1507:1) at useState ./App.js (App.js:11:
浏览 15提问于2022-02-23得票数 3
1回答
我在我的Airtable块扩展中得到了这个错误: Error:无效钩子调用。钩子只能在函数组件的主体内调用。
我不知道为什么。我的程序使用airtable创建一个下拉列表，在useState更新数据库之前设置一个useEffect值。这两个钩子都是在函数体中使用的，函数应该是一个反应性组件，所以我不知道错误在哪里。我已经看到，这可能是因为响应版本冲突等等，但我不知道如何确认这是否是根本问题。
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
浏览 16提问于2022-09-06得票数 0
1回答
我想在我的i18n.js文件中使用来设置一种语言。
我试图这样做，但它发送了一个错误:无效的钩子调用。钩子只能在函数组件的主体内调用。这可能发生在以下原因之一: 1. app和呈现器(如React ) 2的版本可能不匹配。您可能违反了Hooks 3的规则。在同一个应用程序中可能有多个React副本。
import LanguageDetector from 'i18next-browser-languagedetector';
import i18n from 'i18next'
import { initReactI18next } from 'rea
浏览 0提问于2019-09-08得票数 4
2回答
我在React中有以下组件
import React from 'react'
import { Row, Col, Form, Input, Button, Card } from 'antd';
import { FormComponentProps } from 'antd/lib/form/Form';
import Particles from 'react-particles-js';
import { useTranslation } from "react-i18next";
import { co
浏览 3提问于2019-10-25得票数 1
回答已采纳
我试图写一个from，但是它抛出了这个错误：
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You m
浏览 5提问于2019-10-21得票数 1
回答已采纳
1回答
我不知道为什么在通过React查询使用突变时会出现这个错误。任何形式的反馈都将不胜感激。
注意:我在一个函数(React)组件中使用，所以我不知道为什么会抛出这个错误。
错误：
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such
浏览 4提问于2022-05-03得票数 -1
我正在尝试使用UseEffect react钩子，但收到错误: React hook "useEffect“在函数"cockpit”中被调用，该函数既不是React函数组件，也不是自定义React Hook函数 import React, { useEffect } from "react";
import styled from "styled-components";
import "./cockpit.css";
// it is a css code
const StyledButton = styled.button
浏览 35提问于2020-07-26得票数 0
回答已采纳
1回答
所以我有一个名为Context.js的文件，如下所示：
const AppContext = createContext({
// ... scheme colour palette
color1: '#ADBDDB',
color2: '#7F8EB2',
color3: '#546287',
color4: '#384366',
// ... grey colour palette
grey1: '#FFFFFF',
grey7: '#2A3033',
浏览 4提问于2021-06-09得票数 0
我试图使用react导航在两个页面之间移动，Selecttype.js和doctorlogin.js，其中Selecttype.js是initialRouteName，有一个按钮，当有人单击它时，它将重定向到doctorlogin.js。initialRoute正在加载，但我无法使用onclick()事件访问onclick()。
App.js：(路由器)
import React from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer } from
浏览 1提问于2020-12-19得票数 0
我只需要在小屏幕上显示一个对话框。经过研究，我发现有一个名为的钩子，它在浏览器遇到特定分辨率时返回布尔值。
我用的是"@mui/material": "^5.1.1"
这就是我的实现：
import { useTheme, useMediaQuery, Dialog, DialogTitle } from '@mui/material';
import { useEffect, useState } from 'react';
const MyDialog = () => {
const theme = useTh
浏览 2提问于2022-02-04得票数 0
回答已采纳
1回答
我有这个自定义钩子来从firebase获取当前用户：
import React, { Component, useEffect, useState } from 'react';
import { auth } from "../firebase/auth-service"
const useFirebaseAuthentication = (firebase) => {
const [authUser, setAuthUser] = useState(null);
try {
auth.onAuthStateChang
浏览 2提问于2021-01-13得票数 0
我正在为资料UI表实现一个React。实际上，我从资料用户界面网站上拿了一个选项卡的例子，并将其转换成与类兼容的格式。其网站上的例子如下：
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-u
浏览 0提问于2019-06-19得票数 3
回答已采纳
我们正在开发一款智能手机应用程序，它使用的是React-本机。我使用了react本机-安全区域-上下文来获得iPhone 12上凹槽的高度。但是，我得到以下错误：
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the r
浏览 4提问于2021-04-11得票数 0
3回答
如何在react本机中修复此错误：
错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React的不匹配版本和呈现器(例如React )，您可能正在违反Hooks的规则，您可能在同一个应用程序中有多个React副本。
import { cameraWithTensors } from "@tensorflow/tfjs-react-native";
import { Camera } from "expo-camera";
import { StatusBar } from "expo-status-bar
浏览 8提问于2022-01-28得票数 0
我对黑帮很陌生，
我被告知不能直接使用来自rootStore.tsx的rootStore.tsx，我必须用钩子替换它，所以我尝试调用来自rootStore.tsx的钩子useStore
但在本例中，我得到了一个错误“无效钩子调用”，可以在主体内部调用钩子“”
我的档案是：
rootStore.tsx
import { createContext, useContext } from 'react'
import { makeAutoObservable } from 'mobx'
import { AsyncTrunk } from 'mobx-sync
浏览 3提问于2022-02-02得票数 1
回答已采纳
React导航V6文档展示了在useFocusEffect中使用useCallback的示例。然而，当我使用相同的代码时，我会遇到无效的钩子调用。
链接：
import {ActivityIndicator, FlatList, Text, View} from 'react-native';
import React, {useState, useEffect} from 'react';
import {Button} from '@rneui/base';
import {Link} from '@react-navigation/
浏览 2提问于2022-09-29得票数 0
回答已采纳
当我从子组件提交表单时，如何更新定义了父contex api的类的状态？
import React, {createContext,Component} from 'react'
import http from './services/httpService'
import {MyApiUrl} from './services/httpService'
export const GlobalState = createContext()
export class DataProvider extends Component{
浏览 4提问于2021-11-03得票数 0
我在React本机应用程序中有一个登录视图：
import React, {useState, useContext, useEffect} from 'react';
import {View, StyleSheet} from 'react-native';
import {Button, TextInput, Headline} from 'react-native-paper';
import globalStyles from '../styles/global';
import axios from 'axio
浏览 5提问于2020-09-09得票数 1
回答已采纳
有人能告诉我我哪里做错了吗？我正在尝试使用API获取城市，但componentDidMount和componentWillMount都不起作用。 我已经使用button测试了我的getWeather函数，该函数正在工作，但当我尝试使用componentDidMount或componentWillMount调用它时，它不工作... 我的代码如下： import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Heade
浏览 23提问于2021-01-07得票数 0
回答已采纳
我可以使用类组件中的功能组件吗？我将调用从类组件中的函数组件中提取的函数。但它带来的错误如下所示。
未处理的拒绝(错误)：无效钩子调用。钩子只能在函数组件的主体内调用。这种情况可能发生的原因如下之一，
因此，我试图在functional中调用它，但在中，即使在functional中，我也得到了与在类组件中调用它时相同的错误。
功能部件
import React, { useEffect } from 'react';
import { UseWalletProvider, useWallet } from 'use-wallet';
import
浏览 30提问于2021-12-16得票数 2
回答已采纳
1回答
我有一个HoC，它接受组件的集合，并将它们包装在一个div中，这使得它们基本上是可滑动的。代码在浏览器中运行良好，但jest测试失败，并且智能感知显示使用useEffect的警告 import React,{useEffect} from "react";
export const swiper = (components) => {
const swiperHoc = props => {
useEffect(()=>{console.log('HocLogged')})
return <div>{comp
浏览 18提问于2020-02-02得票数 0
2回答
我试图在组件的呈现函数中使用useDispatch。
import { useDispatch } from 'react-redux';
我有一个输入试图在useDispatch on onChange
onChange={() => useDispatch()(update("test"))}
当onChange被触发时，我会得到以下错误：
无效钩子呼叫。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器的版本不匹配(例如React )。
你可能违反了胡克斯的规则
在同一个应用程序中，可能有多
浏览 7提问于2019-10-15得票数 4
回答已采纳
我将REACT路由器DOM从V6升级为V5，我使用了REDUX，并且在COMMON.ACTION中有一个名为CHANGE路由的通用函数，直到现在我使用了HISTORY.PUSH，在更新之后，我需要更改它以使用导航，但是每次更改它时，我都会得到以下错误
错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React的不匹配版本和呈现器(例如React )，您可能正在违反Hooks的规则，您可能在同一个应用程序中有多个React副本。
现在我知道我违反了钩子规则，但我不知道为什么changeRoute是一个函数，我做错了什么？
谢谢你的帮忙
这是我的应用程序
浏览 2提问于2022-01-06得票数 0
3回答
在“反应本机”类中的钩子
、、、
我想知道如何使用组件内部的函数从一个屏幕导航模块导航到另一个屏幕。根据文档，您必须通过在我的标记中包含一个useNavigation()函数来包含onPress (在这里)。问题是，它向我显示了以下错误：“不变违反:无效调用。钩子只能在函数组件的主体内调用。”
我的反应是自然的：
import React, { Component } from 'react';
import {View, StyleSheet, Image, TouchableOpacity} from "react-native";
import { Text } from 'rea
浏览 4提问于2020-06-17得票数 0
回答已采纳
面对太多的重新呈现。React限制呈现的数量，以防止异步无状态组件中的中的无限循环。
我试图使用无状态组件调用异步方法。我试图在异步存储中调用一个API。
基本上，我需要从Asyncstorage获得电子邮件，并将该链接传递到API中。我正在尝试这样做，但面对太多的重新渲染，会出现错误。限制呈现的次数以防止无限循环。
import { BottomNavigation, Text } from 'react-native-paper';
import HomeScreen from './Home';
import PatientScreen from '
浏览 3提问于2021-06-27得票数 1
回答已采纳
1回答
我尝试直接从样式访问useTheme()，但到目前为止，我的解决方案似乎不起作用。我不会再犯错误了。有没有办法做我想做的事？ import { StyleSheet } from "react-native";
import { useTheme } from '@react-navigation/native'
export default function () {
const { colors } = useTheme();
const styles = GlobalStyle
浏览 25提问于2020-12-12得票数 2
回答已采纳
这是我got..and的例外，这对我来说毫无意义.
无效钩子呼叫。钩子只能在函数组件的主体内调用。这可能发生在以下原因之一: 1. React和呈现器(例如React ) 2的版本可能不匹配。您可能违反了Hooks 3的规则。在同一个应用程序中可能有多个React副本，参见fb.me/react-无效-钩子-调用有关如何调试和解决此问题的提示。
这是我的组件.我只是想归档一个标准的登录/密码屏幕.
import React from 'react'
import { View, Text, TouchableWithoutFeedback, TextInput } from &
浏览 2提问于2019-09-23得票数 4
我有一个背景：
export const AppConstArrays = createContext({
neededHours: [],
setNeededHours: (neededHours: INeededHours[]) => { },
serviceTypes: [],
setServiceserviceTypes: (serviceTypes:IServiceTypes[]) => { },
});
我能够在数据服务中使用set函数，这是没有错误的。
ArraysState.setNeededHours(neededHours);
A
浏览 2提问于2020-06-22得票数 0
亲爱的Stack Overflow朋友们： 我将drei用于react native / three.js光纤。我遵循了https://github.com/pmndrs/drei中关于如何加载fbx的说明，但由于“错误:无效的钩子调用。钩子只能在函数组件的主体内调用。这可能是由于以下原因之一：”而无法使其工作。“ 谁能给我指个正确的方向怎么做？ import { StyleSheet, Text, View } from 'react-native';
import ReactDOM from 'react-dom'
import React, { useD
浏览 38提问于2020-11-11得票数 0
回答已采纳
这是我的密码：
<div onClick={(e) => handleClick()}>Join Us</div>
这是手淫：
const handleClick = () => {
console.log(Lang.getLocale())
};
这是我的职责：
class Lang {
static getLocale() {
const { locale } = useRouter();
return locale?.toString()
}
}
export default Lang
但我知道
浏览 7提问于2022-01-13得票数 0
回答已采纳
我有一个带有导出函数的助手文件。我有一个带有一些共享数据的ContextProvider。现在，我需要从助手函数内部更改上下文中的数据。
但是，如果我在函数体内调用useContext语句，如果在外部调用它，也会出现错误。
如果我在助手文件中创建一个默认函数MyHelper()，我可以调用useContext内部及其工作。但是，我不能使用来自另一个文件的不同函数作为api。只有MyHelper()。
如何在另一个.js文件中调用多个导出函数并更改上下文数据？
我制作了一个示例代码，它显示了我的问题，而没有原始代码的开销：
MyScreen.js
import React, {useContex
浏览 3提问于2021-03-19得票数 1
回答已采纳
1回答
重定向提交和反应-钩-形式
、、、、
我有一个简单的注册表单，并使用react-hook-form和react-router。我想在Axios post请求之后在onSubmit内重定向。我不能让它发生，我在网上找不到任何解释原因的东西。
我试过redirect和useNavigate都来自react-router。在使用redirect时没有发生任何事情，我在使用navigate时会得到这个错误
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for o
浏览 7提问于2022-12-02得票数 1
回答已采纳
1回答
我正在尝试使用react native.After创建项目并安装我想要使用的在导航器中使用的所有依赖项，例如：
const MainNavigator = createStackNavigator({
Dashboard: DashboardScreen,
ListSurveyor: {
screen: topSurvayorsNavigator,
navigationOptions: ({ navigation }) => {
const dispatch = useDispatch();
浏览 4提问于2020-01-12得票数 0
谢谢你的阅读。我试图提交一个使用useMutation钩子的中继突变，但得到了错误：
错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器的版本不匹配(例如React )。
你可能违反了胡克斯的规则
您可能在同一应用程序中有多个React副本，请参阅获得有关如何调试和解决此问题的提示。
我的CreateProjectMutation.js是
import { graphql, useMutation } from 'react-relay';
export default function Cr
浏览 11提问于2022-06-03得票数 0
import React, { Fragment } from 'react'
import styled from 'styled-components'
export const routes = [
{ path: '/', name: 'Home', children: <HomePage />, exact: true, strict: true },
...
]
const Wrapper = styled.div``
const Breadcrumbs = () =>
{
浏览 0提问于2020-11-02得票数 0
回答已采纳
我开发谷歌signIn的反应。学习如何实现signIn和学习任何reactjs的概念。
我得到\\//错误：
import {useState, useCallback} from 'react'
export const useGLogIn = props => {
const [isLoggedIn, setLogIn] = useState(false)
const login = useCallback(async ({
onSuccess, onFailure, onFinish
}) => {
console.log(on
浏览 5提问于2020-05-13得票数 0
回答已采纳
我正在尝试使用这个指南来实现一个反应表：
在指南中的某一点上，它说要使用React.useMemo创建数据：
const columns = React.useMemo(
() => [
{
Header: 'Column 1',
accessor: 'col1', // accessor is the "key" in the data
},
{
Header: 'Column 2',
accessor: 'col2',
浏览 2提问于2020-06-19得票数 0
2回答
摘要
。
我尝试的是:我有一个布局页面，其中包含一个侧边栏，页脚，。以及内容页面(例如：/pages/home)
我正在寻找一种方法，在这个常规的/pages/home.js中使用一个反应上下文
相关信息
我已经建立了一个背景：
import React, { useState, createContext } from "react"
const ShareContext = createContext()
const ShareContextProvider = props => {
const [collapsedShare, setCollapsedShar
浏览 2提问于2020-07-04得票数 3
2回答
React和React-Dom必须是同一版本吗？
我们应用程序中的示例：
React v 15.0.2、React-Dom v 15.3.1
直到最近，我们的应用程序一直运行得很好，我们收到了一个奇怪的错误。
Type Error: Cannot read property 'getNativeNode' of null (ReactReconciler)
浏览 1提问于2016-09-05得票数 6
，正如它在标题中所说的，我似乎不能使用钩子
我知道你们中的一些人会试图告诉我这是一个副本，但在我所见过的所有问题中，似乎没有人会问，使用导入的功能组件(我试图呈现的组件)的正确方式是什么。
import React from 'react';
import { hot } from 'react-hot-loader';
import Playground from '../playground/index';
class App extends React.Component {
render() {
Playground
浏览 2提问于2019-03-09得票数 0
回答已采纳
我需要在useEffect()中获取一个api。我尝试这样做，它抛出了以下错误：Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
我的代码如下：
-Api，我需要获取：
export const fetchMyApi = async (code) => {
const { data } = await useQuery("data", () =>
clientAPIs.getData(code)
);
ret
浏览 4提问于2021-07-22得票数 2
回答已采纳
代码：
import React, { Component } from 'react'
import {
View,
Text,
TextInput
} from 'react-native'
export default class Home extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Home'
}
}
render () {
const [val
浏览 14提问于2019-11-21得票数 0
回答已采纳
当我使用useRecoilValue时，我得到了一个错误，无效的钩子调用。我用这个钩子是不是错了？那我该怎么解决这个问题呢？
List.fn.js
import { Alert, AsyncStorage } from "react-native";
import { useRecoilValue } from "recoil";
import { listDataViewer } from "../State";
const ListFunction = (listName) => {
const listID = Date.p
浏览 3提问于2021-07-01得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
