无效的挂钩调用reactjs
是指在React.js中使用Hooks时出现的错误。Hooks是React 16.8版本引入的新特性，它允许我们在函数组件中使用状态和其他React特性。在使用Hooks时，我们需要遵循一些规则和约定。
当出现无效的挂钩调用时，可能是以下几种原因导致的：
- 挂钩函数的调用位置不正确：在React函数组件中，Hooks应该在函数的顶层调用，而不是在条件语句、循环或嵌套函数中调用。确保Hooks的调用位置正确。
- 挂钩函数的调用顺序不正确：在同一个函数组件中，Hooks的调用顺序必须保持一致。例如，useState()应该在useEffect()之前调用，否则会导致无效的挂钩调用错误。
- 挂钩函数的名称拼写错误：检查挂钩函数的名称是否正确拼写，例如，useState()而不是useState。
解决无效的挂钩调用问题的方法如下：
- 检查Hooks的调用位置：确保Hooks的调用在函数组件的顶层，避免在条件语句、循环或嵌套函数中调用。
- 检查Hooks的调用顺序：保持Hooks的调用顺序一致，按照规定的顺序调用useState()、useEffect()等Hooks函数。
- 检查挂钩函数的名称拼写：确保挂钩函数的名称正确拼写，与React提供的Hooks函数名称一致。
对于React开发中的无效的挂钩调用问题，腾讯云提供了一系列云原生产品和解决方案，例如腾讯云函数计算（SCF）和腾讯云容器服务（TKE），可以帮助开发者快速构建和部署React应用，并提供高可用性和弹性扩展的能力。您可以通过腾讯云官网了解更多关于这些产品的信息和使用指南。
参考链接：
- 腾讯云函数计算（SCF）：https://cloud.tencent.com/product/scf
- 腾讯云容器服务（TKE）：https://cloud.tencent.com/product/tke
相关·内容
1回答
我想要改变市场的状态
方法：
publishSample = () => {
this.Service
.publish()
.then((response) => {
this.setState({
loading: true,
});
})
.catch((error) => {
console.log(error);
});
};
我的组件：
{loading ? (
<d
浏览 8提问于2020-05-19得票数 0
我试图向api发送一个参数，以给出准确的json响应，但是当我试图通过选择onChange={onAddSubmit}提交表单时，它仍然传递默认值146846，但我已经将选择更改为146847，因此我将得到无效的响应。
Home.js
import React, { useEffect, useState } from "react";
import Api from "../Api";
import AppContainer from "../tmp/AppContainer";
import HomeContainer from "
浏览 1提问于2021-01-28得票数 2
回答已采纳
我想在一个常规函数中使用我的自定义钩子，如下所示，但是React不让我这么做。我想知道是不是我的useUrl自定义钩子无效，或者调用钩子有问题。 const handleAddFormation = async () => {
console.log('add formation')
await useUrl('POST', 'http://localhost:1337/formations', newFormationList)
setNewFormationList([])
setModalOpen
浏览 91提问于2021-08-29得票数 1
当我使用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
下面的代码从web api获取记录。那是工作，我拿回了唯一的记录。但是我不明白为什么WebApi被调用了8次。 你知道为什么吗？ const Customer = () => {
const [httpRequestDone, setHttpRequestDone] = useState(false);
const [data, setData] = useState([]);
if (!httpRequestDone) {
axios({
method: 'get',
url:
浏览 13提问于2021-05-04得票数 0
回答已采纳
我使用axios从url获取数据。然后，我使用post将获取的数据存储在setPost()中。一旦数据存储在post中，我将使用一个函数getData()对数据进行解码，该函数进一步使用setMetar()将解码后的数据分配给metar。用户在input中输入数据，然后单击submit按钮以获得已解码的数据。问题是需要点击2次才能得到解码的数据，而不是1。
import React, { useState, useEffect, useReducer, useCallback } from "react";
import "./Search.css";
impo
浏览 1提问于2022-06-05得票数 0
回答已采纳
我有以下问题，在我用nextJS和ReactJS构建的网站中，当点击一个按钮时，我有加载的产品，当我点击按钮时，项目出现，按钮向下滚动，这是被要求的行为，但当我滚动到页面底部，我试图点击按钮时，滚动保持在相同的位置，项目被加载，但看不到，我的逻辑是在当前按钮上使用onFocus，当我单击它时，将滚动更改为他，这将解决当用户向下滚动到页面底部时的问题。这样，它就不会停留在底部，而是会自动向上滚动到按钮，并看到加载的新项目。 问题是，加载产品的逻辑是在一个不同的组件中，在这个组件中，我重用了当前的按钮和右道具，并将函数发送到按钮上的onClick。我的问题是如何使用onFocus。它是必须在函数
浏览 17提问于2021-03-26得票数 0
我正在使用express socket-io和reactjs构建一个聊天应用程序。我在reactjs代码中使用'socket.on‘监听客户端的套接字时遇到了问题。基本上我不清楚在哪里/如何使用这段代码。我应该写“socket.on”的哪一部分？ 我尝试在componentDidUpdate()和render()中使用它，但没有得到预期的结果。socket.on中的console.log被多次记录。 就像我放在render()中的时候:似乎每当重新渲染发生时，它都会记住，一旦socket.on事件发生，它就会运行(记录)那么多次，在控制台中显示输出。 将socket.on放入reac
浏览 33提问于2020-04-11得票数 0
在下图中，我们使用了react生命周期方法。是否有其他方法只在我们更改状态时才调用？
在这里，当属性和状态发生变化时，shouldComponentUpdate和comonentWillUpdate都会调用。
提前感谢您！
浏览 1提问于2016-09-14得票数 0
回答已采纳
2回答
有一个从API获取ID的select，然后我有一个显示数据的表。
如果我定义了类似于示例this.state ={value:23}的状态；该表将显示来自的数据，而不会出现问题。
我试图实现的是在更改select之后更新表。我可以通过console.log( event.target.value)获得所选的值；但是，我试图将这个值传递给：
<表value={this.state.value} />
重新渲染桌子！任何帮助都是非常感谢的！
class Planet extends React.Component {
constructor(props) {
super(p
浏览 1提问于2018-04-28得票数 0
回答已采纳
1回答
react组件中的一个函数虽然只被调用了一次，但却会运行多次，这有什么原因吗？
我有这个自动调用自身的测试函数，如下所示：
let xfunction = (() =>
{
console.log('test');
}
)();
这是我在控制台中得到的：
App.js源代码：
import React, { useState, useEffect } from 'react';
import { getAllPokemons } from './services/pokemon'
import
浏览 14提问于2020-03-13得票数 0
我有使用jwt的登录服务。登录后，用户被重定向至配置文件页面。我调用了从数据库获取数据的服务，它工作得很好。我可以在控制台上看到所有的日志，但当我在html部分返回名称时，我看不到该名称。它被写成“未定义的”。 const currentUser = AuthService.user();
let token = localStorage.getItem('User');
let name;
authenticationService.findUser(jwt_decode(token)["sub"]).then (response => resp
浏览 32提问于2021-11-20得票数 0
回答已采纳
1回答
我的朋友们，我正在制作一个react类，它在表单提交时获得一个输入值，使用axios发送get请求，但是在第二次单击之后，我得到了结果
class SearchForm extends React.Component{
constructor(props) {
super(props);
this.state = {inputtermvalue: "",spaces_list: "",spacesname: ""};
}
componentDidMount() {
}
updateInputValue(evt)
浏览 0提问于2018-03-19得票数 0
回答已采纳
我需要在reactjs中从父组件调用子组件方法。我试过使用裁判，但不能这样做。有没有人能提出一些解决方案。谢谢。
浏览 1提问于2017-06-21得票数 7
3回答
问题
当我选择一个选项--下拉菜单时，没有任何东西被选中，因为role的值是一个空字符串。所使用的UI框架是语义UI。
程序是如何工作的
当用户在输入字段上输入时，函数onChange将输入保存到values中的空字符串中。但是，当输入类型是带有预定义输入的下拉菜单时，这是无效的。因此，当用户选择任何选项时，它会自动被转换为空字符串。
我不明白如何解决这个问题。
“守则”
const [values, setValues] = useState({
username: '',
password: '',
confirmPas
浏览 1提问于2020-11-01得票数 0
回答已采纳
我想把我所有的网址放到一个文件中。我需要调用AuthToken方法来返回token。
当我在内部有useSelector钩子的情况下调用AuthToken时，它给出了这个错误：
“无效的挂钩调用。只能在函数组件的主体内调用挂钩。”
useSelector在函数中。我不明白为什么我会得到这个错误。我怎么才能修复它？
下面是我的代码：
<code>A0</code>
浏览 17提问于2021-06-13得票数 0
回答已采纳
我正在尝试从一个处理api调用的非组件函数中调用调度。结构如下：
-MainApp.js
-scripts/
--auth.js
在脚本/auth.js中，如下所示：
export async function signIn(nav) {
const dispatch = useDispatch();
try {
...
dispatch(setIsAuthed(true));
}
...
}
我调用signIn() from和onPress。我接到一个无效的钩子电话。我做错了什么？
浏览 1提问于2022-09-29得票数 0
我的react应用程序中有下一个钩子：
const {
data,
loading
} = fetchData(info)({
variables: {
id: myId,
},
fetchPolicy: 'no-cache',
});
//
const fetchData = (info) => {
if (a > 1) {
return useGetCars;
}
return useGetColors;
};
当myId为空时，该问题将出现在第一个呈现中，但它是必需的。由于这个事实，我从服务器上得到了一
浏览 1提问于2021-05-14得票数 0
我试图在onWheel事件中使用preventDefault，让用户在某些元素上滚动到边上，而不是向下滚动。当我使用e.preventDefault时，我一直收到错误消息:由于目标被视为被动，所以无法在被动事件侦听器内部进行干预。 到目前为止，我似乎只找到了禁用错误消息的方法。 调用函数的JSX： <Wrapper onWheel={(e) => (handleScroll(e))}> 调用e.preventDefault()的函数： const handleScroll = (e) => {
e.preventDefault();
con
浏览 57提问于2019-05-08得票数 1
const [dailyData, setDailyData] = useState([]);
useEffect(async () => {
const fetchData = await fetchDailyData(); // fetchDailyData() is calling Api
setDailyData(fetchData);
console.log(fetchData); //fetchData print the value but dailyData not updating
},[]);
显示破坏不是一个函数，func
浏览 0提问于2020-05-31得票数 2
回答已采纳
我有以下代码：
componentWillMount() {
this.props.actions.A().then(result => {
this.setState({ a: result });
});
}
现在发生的情况是，如果我快速切换页面，我会收到警告：setState(...): Can only update a mounted or mounting...。
我能做些什么来防止这种情况发生？(显然，使用IsMounted属性可以解决这个问题，但作为一个读取器，它已经过时了)
浏览 4提问于2017-02-16得票数 0
1回答
单击按钮后导航页面时，页面会打开较低的位置，这使得用户每次都要向上滚动。这只在移动版本中发生，在桌面版本中运行良好。 由于我刚接触React和UI，有人建议在链接标记中使用tabindex = -1，但这不起作用。 <div className="Header__logo--mobile hidden-on-desktop">
<Link to="/">
<img src={HomeLogoImage} ref={div => (this.imageMobile = div)} />
浏览 18提问于2019-02-19得票数 0
我正在尝试将以下代码转换为钩子，但是我在翻译这行this.fetchPlaces = debounce(this.fetchPlaces, 200);时遇到了一些问题，钩子的确切匹配是什么？ state = {
q: '',
places: [],
}
fetchPlaces(q) {
get(`http://www.example.com/places/`, {
params: {q}
}).then(response => {
this.setState({places: response.data.p
浏览 22提问于2021-04-02得票数 0
2回答
我使用“A”的每个字节来生成加密文件。并再次这样做解密文件-> Excel打开解密文件正常。
现在我想通过Excel打开一个加密的文件。
在返回缓冲区之前，我会钩住ReadFile API来解密它。
但Excel显示
Excel无法打开文件'filename.xlsx‘，因为文件格式或文件扩展名无效
读取前8个字节之后。
解密的8个字节是50 4B 03 04 14 00 06 00，这是正确的Office签名，与原始文件相同。
下面是myReadFile函数：
BOOL WINAPI MyReadFile(
_In_ HANDLE hFile,
_Out_writes_
浏览 2提问于2021-03-23得票数 1
警告:在第286行的/mnt/data/vhosts/casite-961871.cloudaccess.net/httpdocs/wp-includes/class-wp-hook.php中，call_user_func_array()期望参数1是一个有效的回调、函数'wp_my_admin_enqueue_scripts‘或无效的函数名
浏览 0提问于2018-11-29得票数 1
2回答
背景
我是ReactJS新手，需要创建一个具有自动完成功能的搜索字段：
允许自由类型
每个用户输入触发器API请求返回一个匹配数组的列表。
自动建议应该显示最新结果。
问题
API响应以非线性顺序返回；第一个请求可能在第二个请求之后响应，这导致状态存储而不是最新的请求。
export const SearchBar = () => {
const [state, setState] = useState({list: []})
const apiHandler = (term) => {
axois.post('www.abc.com',
浏览 3提问于2021-02-12得票数 2
回答已采纳
我有一个api调用，然后数据被存储在状态中。然后我使用map呈现该数据，我得到了一个表。看那张表的两行。一行可见，另一行隐藏。第一行有切换按钮。如何为每条记录创建切换第二行的函数。 <table>
{data.map(user => (
<>
<tr>
<td>{user.name}</td>
<td>
<button>Toggle</button&g
浏览 9提问于2020-03-31得票数 1
回答已采纳
1回答
我正在创建一个WordPress插件，在这个插件中，我需要跟踪是否打开了前端的任何页面或单击了任何链接？我对这件事有点茫然。有人能告诉我该怎么做才能做到这一点吗？
我试过这个。
class WP_Adminmsp_Webservice{
function __construct() {
add_action( 'init', 'msp_pages_permalink', 10, 2 );
}
function msp_pages_permalink($permalink_structure, $post_id )
{
浏览 2提问于2017-02-01得票数 1
回答已采纳
好的，所以我有多个ajax调用(jQuery)返回，ofc，一个项列表(每个函数的一个对象)。
这里我想要的是组件调用所有的ajax获取，抛出条目，然后我将用所有这些结果构建另一个对象(4个结果将合并到一个具有不同支持的对象中)。
我这里的问题-- is...how --我可以调用和导出这些对象吗？我试着创建一个大函数并从TSX导出它。所有东西都正常工作，有一个小的bug...After通过这4个ajax调用，它不断重复，就像组件本身不断刷新一样，这使我几乎没有任何地方可以使用。
知道我如何导出ajax调用的结果，而不需要看到它循环100次吗？
这就是我到目前为止尝试过的->
let C
浏览 0提问于2018-09-10得票数 0
回答已采纳
我使用的是useEffect、useState和fetch。在页面加载时，我得到了一个项目ids列表。然后，我将根据这些ids调用api。通过这种方式，我应用程序变慢了，有时也有丢失数据的机会。我正在寻找一个优化的方式来解决这个问题。有什么建议吗？
浏览 13提问于2019-11-15得票数 2
我正在检查我的代码，我发现自从我开始使用react钩子，我有一些“问题”，我不能说，但它不够干净。所以基本上我想清理一下我对这个问题的看法。我想在useEffect和setSomething()中使用一个setSomething()语句。因此，基本上有一个消息，我想显示关于状态条件。
电流:
const [displayFeedbackMessage, setDisplayFeedbackMessage ] = useState(undefined);
..。
useEffect(() => {
setDisplayFeedbackMessage(
浏览 0提问于2020-07-03得票数 1
回答已采纳
我在一个网站上工作，我们目前有一个cookie横幅，在启动时显示，并有一个确定按钮。然而，我会改变这一点，为用户提供打开/关闭他们希望被跟踪的cookie类别的选项。如下所示： ? 我是reactjs的新手，我在网上查找过库或示例，但找不到任何东西，但我相信它们会很多。任何人的帮助或指导都将不胜感激。 我考虑过将每种类型的cookie添加到特定的组中，并创建一个函数，然后从前端调用该函数，但如果已经有了解决方案，这将节省时间，而且我也担心跨浏览器/设备的支持。
浏览 35提问于2019-09-06得票数 3
1回答
请看下面的代码，我不知道如何实现如何更新所选的学生状态，我可以得到Id和我点击的状态。
export const UPDATESTATUS = gql`
mutation UpdateStatus($status: String!, $id: String!) {
updateStatus(status: $status, id: $id) {
id
status
}
}
`
//
import {UPDATESTATUS} from '../utils/student.gql'
....
const handleUpdateStatus = ()
浏览 5提问于2022-02-02得票数 2
1回答
这是我几个月来第一次使用react，也是有史以来第一次使用钩子。到目前为止，我很喜欢它，但我遇到了一个问题，这个问题已经阻碍了我几个小时。
我有一个看起来像这样的组件：
import React, { useState } from "react";
import ReactModal from "react-modal";
import { useModal } from "react-modal-hook";
import styled from 'styled-components';
export function Se
浏览 1提问于2020-01-08得票数 0
1回答
我在React/typescript/node中有一个简单的todo应用程序。我有以下组件：
import * as React from "react"
import {forwardRef, useCallback, useEffect} from "react"
import {ITodo} from "../types/type.todo"
import {deleteTodoById, getTodos, updateTodo} from "../api/requests"
import {TextField} from
浏览 0提问于2020-11-15得票数 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
回答已采纳
我是新的反应，我使用的材料ui (组件)组合框显示从一个API选定的数据。
这是我的密码：
this.state = { data: [] , dataValue: ''}
componentDidMount() {
this.props.getAllData().then(data => this.setState({data})}
render() {
return (
<FormControl variant="filled">
<InputLabel htmlFor=&#
浏览 1提问于2019-07-03得票数 0
回答已采纳
1回答
我在试着用酶+ Sinon间谍来测试反应成分。react代码在组件实例中使用属性初始化器语法：
class FixedButton extends React.Component {
handleMouseOver = (e) => {
const { fixedButtonHover = _fixedButtonHover } = this.props;
const { backgroundColor, color } = fixedButtonHover;
e.target.style.backgroundColor = ba
浏览 0提问于2018-10-27得票数 1
回答已采纳
我有一些变量，我需要参考，也需要状态。我在这里发现了一些帮助我的东西：
它几乎保持了两个变量的同步(在伪代码中)：
const [track, setTrack] = useState('INIT');
const trackRef = useRef('INIT');
// Whenever changing, just both are updated
setTrack('newValue');
trackRef.current = 'newValue';
我在想，把这两者合并成一个新的钩子是否有益。就像这样：
const u
浏览 1提问于2021-03-12得票数 0
回答已采纳
在ASP.NET网页上，我有一个EntityDataSource：
<asp:EntityDataSource ID="EntityDataSourceOrders" runat="server"
ConnectionString="name=EntitiesContext"
DefaultContainerName="EntitiesContext"
EntitySetName="Order"
Select="it.OrderID
浏览 0提问于2010-02-23得票数 0
回答已采纳
1回答
parse支持原子性吗？
、、、、
假设我们有一个使用parse的移动应用程序，并且大多数用户都试图同时写入一个PFObject，同时一些用户正在尝试读取该值。parse是否支持原子性，以防止数据损坏。是否可以保证PFObject永远不会处于无效状态。
浏览 0提问于2015-09-01得票数 2
我想把一个2d数组推到状态的末尾。但是，当我每次用useEffect记录状态时，我会用新的数组替换现有的每个数组。
变量"position“是我的2d数组，也是一个状态。这会不会引起引用问题？我不知道，我开始对此失去理智.
const [positionList, setPositionList] = useState([]);
useEffect(() => {
const updatePosition = [...positionList, position]
setPositionList(updatePosition);
}, [playerTurn])
浏览 0提问于2022-05-13得票数 0
我使用axios从api端点获取数据。我使用getAllUser()方法获取数据，displayUsers()从数据中显示userName和email。我无法在控制台中获得JSON响应。我还在chrome中看到了XHR，但是请求不是针对那个API端点提出的。请告诉我，我应该在getAllUser()和displayUsers()中更改什么，因为我认为我在这些方法中做错了什么。
代码：
import React, { Component } from 'react';
import axios, { post } from 'axios';
class App
浏览 0提问于2018-05-03得票数 1
回答已采纳
我想要做的是根据类别id/slug获取数据。例如，我有两类(棕色和黑色)，如下所示。如何根据分类id/段塞来获取blog_set数据？
我可能刚接触过ReactJ。如果有人能帮我解决我想做的是什么，那就太好了。提前谢谢你。
端点-url：
api-数据：
[
{
"id": 1,
"title": "brown",
"slug": "brown",
"image": "http://localhost:8000/medi
浏览 4提问于2020-05-15得票数 0
回答已采纳
2回答
尝试在ReactJS中制作主从图
、、、、
我正在尝试复制这个示例：，但使用React (+钩子)。
我的问题是detailChart，因为我已经让主控程序工作了，我知道detailChart将由回调生成(我仍然不太擅长回调的概念)。
Highcharts文档中说我可以在chart.events.load中创建一个回调函数，这也是我决定在masterChart中做的事情。
但是，我在createDetails函数(回调函数)中得到一个错误，说明
undefined is not an object (evaluating 'masterChart.series[0]')
这很奇怪，因为我在创建masterChart时做了
浏览 0提问于2020-03-06得票数 1
我在打字稿中使用ReactJS。我需要下面的“构造器”代码吗？没有它，它工作得很好，我看了一下转换后的JavaScript，它似乎是自动添加的。
interface myProps {
children?: any;
}
class MyButton extends React.Component<myProps, {}> {
constructor(props: myProps) { //Needed ???
super(props);
}
render() {
return (<div>
浏览 5提问于2016-02-16得票数 2
回答已采纳
目前，我正在更新componentDidUpdate生命周期函数中的状态。但是，由于该函数的性质，我的应用程序会连续发送GET请求，所以我不确定应该在哪里更新状态，这样我就可以避免这种情况。
以下是我的代码。
componentDidUpdate(){
if(this.props.id){
if(!this.props.loadedPost || (this.state.loadedPost && this.state.loadedPost.ID !== this.props.id)){
axios.get('https:
浏览 0提问于2018-01-29得票数 1
回答已采纳
1回答
我有以下数据：
planets: [
{
planetName: '1',
countries: [
{
countryName:'1';
population: 432,
worth: 65,
},
{
countryName:'2';
浏览 0提问于2022-11-03得票数 0
嗨，我正在尝试使用上下文API，这是我的代码
App.js
import {Provider} from './components/contexApi/context';
class App extends Component {
render() {
return (
<Provider>
<div className="App">
<Header />
<TodoList />
</div>
浏览 4提问于2020-03-16得票数 1
回答已采纳
我想知道是否有一个wordpress钩子来检查一个自定义输入字段。添加新用户和更新现有用户时。
如果任何字段无效，我不希望创建用户。
如果(！is_numeric($_POST‘’phone_Number‘))$ERROR->添加(’ERROR 0001'，‘无效手机号码’)；
此外，如果存在，它是否与Wordpress Multisite兼容？
谢谢。
浏览 4提问于2014-08-26得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
