React Hook "useState“在函数"AAA”中调用，该函数既不是React函数组件，也不是自定义React Hook函数
React Hook "useState"是React提供的一种用于在函数组件中管理状态的机制。它可以让我们在不编写类组件的情况下，使用状态和其他React特性。
在函数"AAA"中调用useState是不合法的，因为useState只能在React函数组件或自定义React Hook函数中使用。React函数组件是指以函数形式定义的组件，而自定义React Hook函数是指以"use"开头的自定义函数，用于封装可复用的逻辑。
如果函数"AAA"既不是React函数组件，也不是自定义React Hook函数，那么在该函数中调用useState是无效的，并且可能会导致错误。
如果你想在函数"AAA"中使用React的状态管理机制，你可以将函数"AAA"转换为React函数组件或自定义React Hook函数。这样，你就可以在函数中使用useState来管理状态。
以下是一个示例，展示了如何将函数"AAA"转换为React函数组件，并在其中使用useState：
import React, { useState } from 'react';
function AAA() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default AAA;在上述示例中，我们使用useState定义了一个名为count的状态变量，并使用setCount函数来更新该状态。在返回的JSX中，我们展示了count的值，并在按钮的点击事件中调用setCount来增加count的值。
这是一个简单的示例，用于说明如何在React函数组件中使用useState。实际应用中，useState可以用于管理更复杂的状态，并且可以与其他React Hook一起使用，以实现更强大的功能。
腾讯云提供了一系列与React相关的产品和服务，例如云服务器、云数据库、云存储等。你可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的信息。
相关·内容
我只是尝试应用一个基本的自定义钩子，但它给出了一个错误，但它给出了一个错误，如下所示
React Hook "useState“在函数"usecount”中调用，该函数既不是React函数组件，也不是自定义React Hook函数。
import { useState } from 'react'
function usecount() {
const [count,setCount] = useState(0)
const increment = () =>{
setCount(prev => prev + 1)
}
const d
浏览 2提问于2021-07-24得票数 1
1回答
我在使用usestate()钩子进行状态操作后遇到问题。
无法编译错误：
./src/App.js
Line 6:43: React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Line 14:39: React Hook "useState" is called in functio
浏览 13提问于2020-03-05得票数 0
我试图在我的功能组件中使用React useState钩子，但是我得到了这个错误：
Failed to compile
./src/Person/Person.js
Line 5:43: React Hook "useState" is called in function "person" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Search for the keywords to le
浏览 50提问于2019-11-22得票数 3
回答已采纳
我有一个使用钩子useCallback的功能组件。过去几天一切都很好。一切都正常运作。今天我启动了这个应用程序，我有一个错误：
React Hook "useCallback" is called in function "loginPage" which is neither a React function component or a custom React Hook function
这是没有道理的，因为它一直很好。为了调试，我只是删除了页面上的所有代码，只是其中一段代码经过了编辑，甚至只是将一个useCallback模板放在了原来的位置，但仍然一样。
浏览 0提问于2019-04-26得票数 2
回答已采纳
我有(TypeScript)代码，如下所示：
export const DemoComponent = React.memo((props: DemoComponentProps) => {
const [state1, setState1] = React.useState<string | undefined>('');
const [state2, setState2] = React.useState<string | undefined>('');
const createF = (b: boole
浏览 2提问于2020-07-06得票数 0
回答已采纳
我正在尝试基于表单提交在功能组件中进行API调用：
const SearchForm = () => {
const [keywords, setKeywords] = useState('')
const [fetchedData, setFetchedData] = useState('')
const handleSubmit = (e) => {
e.preventDefault();
useEffect(() => {
async function fe
浏览 1提问于2020-06-08得票数 11
回答已采纳
错误：
React Hook "useState" is called in function "createFlight" that is
neither a React function component nor a custom React Hook function.
React component names must start with an uppercase letter react-
hooks/rules-of-hooks
我的代码：
import React, {Component} from 'react'
浏览 1提问于2021-11-27得票数 0
我想在一个常规函数中使用我的自定义钩子，如下所示，但是React不让我这么做。我想知道是不是我的useUrl自定义钩子无效，或者调用钩子有问题。 const handleAddFormation = async () => {
console.log('add formation')
await useUrl('POST', 'http://localhost:1337/formations', newFormationList)
setNewFormationList([])
setModalOpen
浏览 91提问于2021-08-29得票数 1
我被困在无效的钩子警告。这是一个第三方依赖，这也使得它难以控制。但这是一个引起问题的密码，
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
回答已采纳
我是新加入ReactJS的。我试图建立一个备忘单(都在同一页)来学习基础知识。
我的Props.js和PropsList.js不能工作，我不明白这个错误信息。
PropList.js是Prop.js的孩子，Prop.js是App.js的孩子。
我只想用useState (作为初学者的一种简单的方式)在同一页上的基本课程( useState，useEffect，道具等)。)并有一个排序良好的文件。
如果您有任何建议/建议，请提前感谢。
App.js
import './App.css';
import OutputtingLists from './Components/
浏览 5提问于2021-08-06得票数 1
我使用React钩子来表示状态，但是当我使用useState时，它显示了一个错误，即：
Compiled with problems:X
ERROR
src\Form.js
Line 9:29: React Hook "React.useState" is called in function "form" that is neither a React function component nor a custom React Hook function. React component na
浏览 1提问于2022-02-27得票数 0
BlogDetailsPage.js
import { connect } from "react-redux";
import { useParams } from "react-router-dom";
const BlogDetailsPage = (props) => {
const { id } = useParams();
return <div>Blog Details: {}</div>;
};
const mapStateToProps = (state, props) => {
const
浏览 15提问于2022-05-22得票数 2
回答已采纳
我正在使用钩子，但是我得到了这个错误
第25行:在既不是React函数组件也不是自定义React钩子函数的"contact“函数中调用React Hook "React.useState”第26行:在既不是React函数组件也不是自定义React钩子函数的"contact“函数中调用React Hook "React.useState”第27行:在既不是React函数组件也不是自定义React钩子函数的React Hook函数中调用react Hook "React.useState“
export default function contact()
浏览 2提问于2019-08-03得票数 1
下面的代码是一个名为useToggle的自定义钩子，它被定义为一个自定义钩子，在显示/隐藏一个模式时非常有用，但我不明白为什么要通过这样的代码来实现这样一个简单的特性。仅仅使用useState()不是更好吗？
useToggle自定义钩子
import { useCallback, useState } from 'react';
// Usage
function App() {
// Call the hook which returns, current value and the toggler function
const [isTextChanged
浏览 9提问于2022-06-06得票数 0
回答已采纳
我试图使用useMediaQuery来响应javascript媒体查询，但是我无法让它工作，我得到：-
错误消息："useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function
游乐场
我想这是media-query.ts第4行的错误
import { useState, useEffect } from 'react'
const useMediaQue
浏览 0提问于2020-11-07得票数 0
回答已采纳
2回答
将一个React作为另一个组件的支柱传递给它是可以接受的/常见的吗？
还是意味着它们只属于在其中声明的组件？
下面只是一个例子，用来说明我把它传递给
从父组件到子父组件的支持。
import React, { useState } from 'react';
export const Parent = () => {
const [count, setCount] = useState(0);
return <div>
Current count is {count}
<Child setCount={setCount} /
浏览 5提问于2021-03-25得票数 17
回答已采纳
我有以下反应性Todo组件：
import React, { useState } from 'react';
const todo = props => {
const inputState = useState('') // problem with this line
return (
<React.Fragment>
<input type="text" />
</React.Fragment>
)
}
export default todo
运行
浏览 1提问于2019-04-30得票数 0
回答已采纳
import {useState} from 'react'
const nav = () => {
const [activeNav, setActiveNav] = useState('#')
}
我想建个导航吧。我搞错了，我不知道为什么
React Hook "useState" is called in function "nav" that is neither a React function component nor a custom React Hook function. React compone
浏览 7提问于2022-03-17得票数 1
1回答
我有一个使用react-router的React应用程序。我的路由的简约版本如下：
<Router>
<div className="App">
<Sidebar />
<div className="app-container">
<Switch>
<Route path="/" exact render={Home} />
<Route path="/logs" e
浏览 4提问于2020-09-29得票数 1
我正在尝试使用这个指南来实现一个反应表：
在指南中的某一点上，它说要使用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
我有一个函数，每次名称状态改变时都会调用该函数。我想把这个更改后的值发送给父组件，但它指出了这个错误：
React Hook "useEffect" is called in function "handleNameChange" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
代码：
export default function config({ me, setMePut }) {
co
浏览 0提问于2020-04-07得票数 0
3回答
我编写了一个函数来进行API调用。通常，我只需将其包装在一个useEffect中，并将其放入需要它的同一个文件中，但我正在尝试编写更简洁的代码。所以我做了下面的事。
在我的component.js文件中，我有以下内容：
import { apiCall } from '../../../framework/api.js';
import { useEffect, useState } from 'react';
export const Table = () => {
const [ resp, setResp ] = useState();
浏览 10提问于2022-01-13得票数 1
回答已采纳
我是新的反应前沿发展。我试图在我的材料中添加一个临时抽屉-UI NavBar。我在代码中添加了一个抽屉：
class Navbar extends Component {
render() {
const { authenticated } = this.props;
const [open, setOpen] = useState(false);
const handleDrawer = () =>{
setOpen(true)
}
return (
&
浏览 0提问于2020-12-02得票数 3
回答已采纳
1回答
如何检测传递的函数是否是React Hook函数？ isHook(useState); // return true
isHook(() => {}); // return false; 我需要知道对象属性的附加函数是不是钩子。如果它是来自另一个函数的“普通函数”，我需要调用该函数。
浏览 16提问于2019-03-25得票数 1
我正在做一个小项目的最后一步，它使用一个高阶组件(HOC)来呈现一个简单的类似Tinder的应用程序。
内部组件是一个基于类的组件，它有自己的fetch()调用，为用户和图片呈现数据。外部HOC是一个功能组件。要让应用程序正常工作，我需要做的就是找到一种方法来刷新内部组件，并在用户按下按钮时触发API调用。我正在尝试用HOC中的useState钩子来做这件事。
import React, { useState } from 'react';
export default function TinderCard(component) {
return function (p
浏览 2提问于2020-12-06得票数 0
我有按钮点击系统和它的工作。
function clickCreate(msg){
console.log(msg);
}
const CreateButton = (props) =>{
return(
<div>
<i onClick = {() => clickCreate("test")} id="createBtn" className="fas fa-5x fa-microphone-alt"></i>
</div>
);
}
现在，我
浏览 4提问于2021-01-09得票数 0
回答已采纳
我试图在一个函数组件中进行API调用，这个函数组件是一个反作用钩子，并根据结果重新呈现组件的内容。以下是代码：
组件调用API-
function IntegrationDownshift() {
render(
<Paper square>
{setResults(inputValue).map(
(suggestion, index) =>
renderSuggestion({
suggestion,
浏览 4提问于2019-06-05得票数 9
有一个，我不太明白它在说什么：
只从React函数调用钩子
不要从常规的JavaScript函数调用钩子。相反，你可以：
✅从function函数组件调用钩子。
✅从自定义钩子调用钩子(我们将在下一页了解它们)。
通过遵循此规则，您可以确保组件中的所有有状态逻辑在其源代码中都是清晰可见的。
仅仅从调用Hooks意味着什么?一个function函数与我所称的普通函数组件有什么不同？
在我看来它们是一样的：
const App = () => {
useEffect(() => //do stuff);
return (
// return s
浏览 2提问于2019-06-01得票数 7
回答已采纳
2回答
我没有在TypeScript中使用React Hook，但我有几行代码，如下所示：
const [columns] = React.useState<Column[]>([
{ name: 'product', title: 'Product' },
{ name: 'region', title: 'Region' },
{ name: 'amount', title: 'Sale Amount' },
{ name: 'saleDate'
浏览 14提问于2020-05-20得票数 0
回答已采纳
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
1回答
我有这个组件： import React, { Component } from 'react';
import useFetch from "../useFetch";
export class Patient extends Component {
static displayName = Patient.name;
constructor(props) {
super(props);
}
浏览 29提问于2021-08-27得票数 0
1回答
你好，我正在尝试在Gatsby中使用chart js。我目前正在学习在react中使用chart js的教程，我不确定问题是不是他使用的是creat-react-app，而不是Gatsby，但错误似乎并没有表明这一点。 首先，我安装了以下软件： npm i --save react-chartjs-2 然后 npm i --save chart.js chartData.js： import React, {useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
浏览 13提问于2020-06-19得票数 0
回答已采纳
2回答
我收到一个错误 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 React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might ha
浏览 8提问于2020-11-18得票数 1
import React, { useState } from "react";
import { Redirect } from "react-router-dom";
function Update(data) {
if(!data.location.state) return <Redirect to="/"/>
const [name, setName] = useState(data.location.state.name);
return (<
浏览 1提问于2021-06-12得票数 0
2回答
我正在尝试在react原生的类组件之外创建以下常量变量： import { Component, useState } from 'react';
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
class NotificationScreen extends Component { 但在运行app时弹出如下错误： Invariant Violatio
浏览 144提问于2020-12-08得票数 0
3回答
我正在尝试实现一个静态方法，以使我的代码更简洁。在我试着这么做之前，它一直运作得很好：
// Auth.js
import {useDispatch} from 'react-redux';
import {signOut} from './redux_actions';
export class Auth {
static signOut = () => {
const dispatch = useDispatch();
dispatch(signOut())
}
}
// Menu.js
import
浏览 2提问于2019-10-23得票数 0
回答已采纳
1回答
如何使钩子状态更改为只呈现钩子而不是组件的呈现？为此，我将逻辑添加到空返回中间件组件中，但我不知道这是否是个好主意。
import { useState, useMemo, useEffect } from "react";
import "./styles.css";
function useTime() {
const [a, setA] = useState(0);
console.log("good-render", a);
useEffect(() => {
setInterval(() => {
浏览 0提问于2021-04-20得票数 0
回答已采纳
2回答
我指的是下面的链接(部分:用于功能组件的HOCs ) 。
在这个例子中，下面是专案的代码；
//functional HOC with useState hook
import React, { useState } from 'react';
function withCountState(Wrapped) {
return function (props) {
const [count, setCount] = useState(0);
props['count'] = count;
props['se
浏览 2提问于2020-12-31得票数 2
我得到了错误：“无效的钩子调用。钩子只能在函数组件的主体内调用。”在反应功能方面：
interface Items {
items: any[]
}
const [items, setItems] = useState<Items>();
const ItemsList: React.FC<Items> = ({ items }) => {
useEffect(() => {
const response = Http.get<Items>(url).then(res => setItems(res)) || [] as
浏览 4提问于2021-01-14得票数 0
回答已采纳
我是react的初学者。我正在尝试使用react-hooks将数据库的值从一个文件发送到另一个文件，并得到以下错误，有人能帮助我吗？
第5:41行:不能在顶层调用React Hook "useState“。React Hooks必须在React函数组件或自定义React Hook函数react-hooks/rules-of-hooks代码中调用：
import React, {useState, useEffect} from "react";
import Axios from "axios";
const [collegeList, setcol
浏览 47提问于2021-05-18得票数 0
我正在尝试将react-hook-form与我的自定义日期选择器一起使用，但我只看到这个示例()，它使用默认的react-date-picker。
但是，它只适用于原始的反应日期选择器。我用我的自定义日期选择器尝试了同样的方法，但它不起作用……
这是我自定义的日期选择器：
import React, { useState } from 'react';
import ReactDatePicker from 'react-datepicker';
import tw from "date-fns/locale/zh-TW";
import
浏览 33提问于2020-05-05得票数 1
回答已采纳
我正在尝试通过react-redux来使用暗模式和光模式的主题切换。
Color.js
import { useSelector } from 'react-redux';
const darkMode = {
primary: 'black',
secondary: 'white',
}
const lightMode = {
primary: 'white',
secondary: 'black',
}
function ColorMode(
浏览 1提问于2021-07-23得票数 1
我知道如何在类组件中使用钩子的一种方法是让一个HOC返回一个函数组件，在它里面我们可以调用钩子并将prop传递给一个类组件。看看乔尔·考克斯的How can I use React hooks in React classic class component?和答案。 现在问题来了，以https://reactjs.org/docs/hooks-custom.html#using-a-custom-hook为例，考虑我们有一个钩子useFriendStatus，它接受一个friendID，具有订阅该朋友的在线状态的效果，并在每次重新呈现时进行清理，因此对于新的friendID，钩子可以订阅新
浏览 29提问于2021-08-14得票数 1
1回答
我是个新手，我得到了以下错误：
react-dom.development.js:14906 Uncaught 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 React and the renderer (such as React DOM)
2. You might
浏览 1提问于2021-04-29得票数 0
2回答
从另一个页面导入函数
、、、
单击按钮时，我需要从另一个页面调用函数resetToken()。resetToken()应该更改useState以生成新代码。我不知道如何将这个函数导入到另一个页面并使用它。
我有导入import Captcha from '../../../components/Captcha/Captcha';，并在return( ... )中用<Captcha/>显示
因此，当我单击按钮时，我需要调用函数resetToken()来生成新代码或再次调用导入，因为我在<Captcha/>中有
React.useEffect(() => {
浏览 5提问于2022-07-07得票数 0
回答已采纳
我得到了这个错误，我真的不能解决它： src/api/ConnectApi.js
Line 25:8: React Hook useEffect has missing dependencies: 'apiurl', 'dataState', and 'fetch'. Either include them or remove the dependency array. You can also do a functional update 'setDataState(d => ...)' if you only n
浏览 52提问于2021-08-04得票数 0
回答已采纳
为什么我不能在路由直接组件中使用react钩子，在其他地方我可以使用钩子，没有出现问题。任何人都可以回答这个问题，我如何在这些组件中使用钩子 错误是这样的 ./src/Pages/bookingPage.js第6:29行:在函数"bookingPage“中调用React Hook "useState”，该函数既不是React函数组件，也不是自定义React Hook函数react-hooks/rules-of-hooks 搜索关键字以了解有关每个错误的详细信息。 这是我的app.js import React, { useState } from 'react'
浏览 25提问于2020-09-03得票数 0
回答已采纳
2回答
自定义提取钩子落后一步
、、、、
我正在为get和post数据创建自定义的提取钩子。我遵循官方的React来创建自定义的获取钩子，但是由于useState异步行为，看来我的钩子返回的状态变量落后了一步。这是我定制的useMutation钩子
export const useMutationAwait = (url, options) => {
const [body, setBody] = React.useState({});
const [data, setData] = React.useState(null);
const [error, setError] = React.useState(null
浏览 4提问于2021-11-22得票数 2
我在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
使用功能组件构建我的ui。我的寄存器组件找不到import react, {useState} from 'react'，它返回给我这个错误。 Failed to compile.
./src/pages/Register.js
Line 10:31: React Hook "useState" is called in function "register"
which is neither a React function component or a custom React Hook function
react-hook
浏览 27提问于2020-10-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
