如何在自定义react钩子中获取当前react组件名称？
在自定义React钩子中获取当前React组件名称的方法是使用displayName属性或者通过name属性来获取。
- 使用
displayName属性： 在React组件定义时，可以通过设置displayName属性来指定组件的名称。在自定义钩子中，可以通过访问Component.displayName来获取当前组件的名称。
function useComponentName() {
const componentName = React.useMemo(() => {
const component = React.useMemo(() => {
const stack = new Error().stack;
const match = stack && stack.match(/at\s(\w+)\./);
return match ? match[1] : '';
}, []);
return component.displayName || component.name || '';
}, []);
return componentName;
}
// 使用自定义钩子
function MyComponent() {
const componentName = useComponentName();
return <div>{componentName}</div>;
}- 使用
name属性： 在自定义钩子中，可以通过访问Component.name来获取当前组件的名称。
function useComponentName() {
const componentName = React.useMemo(() => {
const component = React.useMemo(() => {
const stack = new Error().stack;
const match = stack && stack.match(/at\s(\w+)\./);
return match ? match[1] : '';
}, []);
return component.name || '';
}, []);
return componentName;
}
// 使用自定义钩子
function MyComponent() {
const componentName = useComponentName();
return <div>{componentName}</div>;
}以上两种方法都是通过获取调用栈中的组件名称来实现的。在自定义钩子中，通过创建一个错误对象并获取调用栈，然后从调用栈中提取组件名称。最后，将获取到的组件名称返回供使用。
腾讯云相关产品和产品介绍链接地址：
相关·内容
错误：
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 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
回答已采纳
6回答
我已经创建了一个高阶组件，它应该为我的组件添加一些额外的功能。然而，当我在这个组件中使用react时，我会得到下面的eslint警告。
React "React.useEffect“不能在回调中调用。必须在React函数组件或自定义React函数中调用。(反应钩/钩规则)
我为什么要收到这个警告？在HoC中使用钩子被认为是不好的做法吗？
最起码的例子：
const Hello = props => <p>Greetings {props.name}</p>;
const Wrapper = Component => props =>
浏览 7提问于2019-05-24得票数 20
回答已采纳
我正在尝试使用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
回答已采纳
我在使用反应性路由器-dom V5，
在组件中，在呈现时，我必须显示一个按钮，该按钮将将我重定向到另一个组件布局：
我已经说过：
import React, { Component } from 'react';
import DashboardLayout from "../../views-layouts/DashboardLayout";
import { BrowserRouter , Switch ,Route , Link } from 'react-router-dom';
import { useHistory } from &#
浏览 2提问于2021-06-08得票数 0
回答已采纳
，正如它在标题中所说的，我似乎不能使用钩子
我知道你们中的一些人会试图告诉我这是一个副本，但在我所见过的所有问题中，似乎没有人会问，使用导入的功能组件(我试图呈现的组件)的正确方式是什么。
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
回答已采纳
我有一个使用钩子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
回答已采纳
1回答
我正在尝试从自定义钩子中获取屏幕尺寸，但我不知道如何使用导入组件的结果。
显然，我可以使用{MyDims.Width}和{MyDims.Height}来显示结果，但是对于我的最后一个脚本，我需要使用这两个对象作为字符串，因此需要使用useState()。
下面是导入的组件: getdimensions.js
import React, {
useState,
useEffect
} from "react";
import {
Dimensions
} from "react-native";
function App(props) {
co
浏览 1提问于2020-08-15得票数 1
回答已采纳
1回答
一个组件显示了一个值列表，我试图隐藏关于这些值是如何得到的所有信息，基本上是将状态的关注从组件本身中分离出来，这样在将来获取API数据的任何更改、使用什么存储等等都不会影响组件。
首先，这到底是一个好主意，还是应该在组件中直接处理挂载/卸载操作？
第二，如果这是一个很好的方法，我的实现如何？我在JS感觉很舒服，但不是专家
ContentList.js：
import React from 'react'
import './ContentList.css'
import { ContentCardContainer } from '../Conten
浏览 0提问于2020-12-04得票数 1
回答已采纳
我有一个反应无状态函数组件(证监会)。我希望用户点击一个按钮，点击一个http呼叫将从证监会发出，当收到回应时，我想打开一个模式。用证监会是否可以做到呢？还是我需要保留一个有状态组件？
这是我的代码，它在加载时进行http调用，然后onClick打开模式。但我希望这两件事都能在onClick事件上依次发生。
//HTTP CALL FUNCTION
function httpListCall(url) {
const [list, setData] = React.useState(null);
const [error, setError] = React.useState(
浏览 1提问于2019-07-25得票数 1
回答已采纳
1回答
因此，当您‘刷新’页面新数据并显示用户名(以及活动状态)时，我部署了这个应用程序来演示问题，但是当我单击“随机用户”按钮时，即使我重新获取数据，也不会得到相同的行为。我希望获得与页面刷新相同的行为。(使用活动状态显示名称)以更好地观察问题:在其他字段上悬停，单击随机用户btn，然后在名称上重新输入鼠标(配置文件图标)。它不会更新，因为您将看到。
import './App.css';
import ProfileCard from './components/ProfileCard';
import React, { useEffect, useState }
浏览 0提问于2021-09-28得票数 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
我正在进行一个项目的反应和使用rtk查询。我需要从一个api中获取数据并将其传递给另一个api，并根据品牌名称获取汽车数量，但我的第一个api是一个品牌名称数组，rtk查询不适用于循环。请给我一个方法，我可以动态地得到不。在我的桌子上展示了品牌名称的汽车。提前谢谢。
import 'react' from React;
function Cars(){
const {data:branddata} = useGetAllBrands();
//need to get brandname dynamically
const {data:carsdata} = useGetC
浏览 3提问于2022-08-02得票数 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
我已经创建了一个自定义函数组件，它具有来自NetInfo的用于互联网连接的eventlistener，它返回一个布尔值和方法名。我想调用每个类组件中的方法来检查互联网连接，并使用布尔值来检查连接状态。
下面是我的代码。
//function Component
import React, { PureComponent, useEffect, useState } from 'react';
import NetInfo from "@react-native-community/netinfo";
export default () => {
c
浏览 4提问于2020-07-08得票数 0
我知道如何在类组件中使用钩子的一种方法是让一个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
在我的React应用程序中，我有一个内部保存useState值的自定义钩子，但是自定义钩子本身不返回任何值。
如果其内部useState的值发生变化，这会导致调用此自定义钩子的组件重新呈现吗？
浏览 4提问于2022-06-11得票数 2
回答已采纳
1回答
我希望在异步操作中使用存储数据，但是当我调用useStore钩子时，会得到以下错误：
无效钩子呼叫。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器(例如renderer )的不匹配版本
你可能违反了Hooks的规则
在同一个应用程序中可能有多个React副本
导出函数getCommitsData() { const = useStore()；返回异步函数(调度:函数){ try { const提交=等待axios.get(url)；const commitsData =等待commits.data；调度(getCommitsDataAction({
浏览 1提问于2021-10-20得票数 0
回答已采纳
Store.js：
import {useReducer} from "react";
import {ACTION_TYPES} from "./storeActionTypes";
export const INITIAL_STATE = {
counter: 0,
};
export const storeReducer = (state, action) => {
switch (action.type) {
case ACTION_TYPES.INCREASE_COUNTER_BY_1:
return {
浏览 8提问于2022-10-30得票数 0
回答已采纳
我试图在一个函数组件中进行API调用，这个函数组件是一个反作用钩子，并根据结果重新呈现组件的内容。以下是代码：
组件调用API-
function IntegrationDownshift() {
render(
<Paper square>
{setResults(inputValue).map(
(suggestion, index) =>
renderSuggestion({
suggestion,
浏览 4提问于2019-06-05得票数 9
1回答
我有自己的useTheme钩子：
// custom hook
export const useTheme = () => {
const [theme, setTheme] = useState(localStorage.getItem('theme'))
const changeTheme = () => {
const newTheme = theme === LIGHT_THEME ? DARK_THEME : LIGHT_THEME
setTheme(newTheme)
localStorage.se
浏览 0提问于2020-06-03得票数 0
回答已采纳
2回答
从另一个页面导入函数
、、、
单击按钮时，我需要从另一个页面调用函数resetToken()。resetToken()应该更改useState以生成新代码。我不知道如何将这个函数导入到另一个页面并使用它。
我有导入import Captcha from '../../../components/Captcha/Captcha';，并在return( ... )中用<Captcha/>显示
因此，当我单击按钮时，我需要调用函数resetToken()来生成新代码或再次调用导入，因为我在<Captcha/>中有
React.useEffect(() => {
浏览 5提问于2022-07-07得票数 0
回答已采纳
我为来自服务器的get请求创建了自定义钩子。下面是一个例子
const usePost = (id: string) => {
return useQuery(['posts', id], () => getPost(id))
}
const usePosts = () => {
return useQuery(['posts'], () => getPosts())
}
但是，有时我需要在一个文件中调用多个查询，所以我想使用useQueries钩子和自定义钩子。但是，当我尝试使用自定义钩子作为queryFn时，funct
浏览 3提问于2022-07-26得票数 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
回答已采纳
我正试图通过我的申请使这个钩子恢复正常。
这个钩子检索posts，我希望能够在其他页面上调用这个钩子。
postsHook.tsx
import React, { useEffect, useRef } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
addContent,
addTitle,
createPostInit,
delet
浏览 1提问于2020-03-10得票数 0
回答已采纳
我不知道如何解决这个问题: react "useQuery“是在函数"onSubmit”中调用的，它既不是react函数组件，也不是自定义React函数。React组件名称必须以大写字母开头。
export const LoginForm = () => {
const { handleSubmit, control } = useForm<IFormInput>({defaultValues: defaultValues, resolver: yupResolver(schema)});
const onSubmit = ({emai
浏览 13提问于2021-08-11得票数 2
1回答
另一篇刚从打字稿开始。我读过许多关于类型记录、特制和功能组件的文章，取代了基于类的组件。但我仍在为这件事而挣扎。
我想要一个自组织的连接()到redux存储，这个存储可以用来产生一个新的组件，这个组件也连接到这个存储。
这种机制背后的原理是，编写一个基类( HOC )组件，它从'mapStateToProps‘和'dispatchToProps’中更新其核心逻辑，而由HOC封装的组件在其“自己的空间”(无法想出更好的解释方法)中做同样的工作，从而最终减少代码的重复。
也许我对基于类的方法的观点想得太多了。
这就是我现在想出来的。
特设小组：
import React, {Com
浏览 5提问于2022-04-28得票数 0
当我在控制台中使用产品API中的数组方法(如map、filter等)时，以及在浏览器中没有得到任何信息时，我都会出错。我在这里使用redux-toolkit/query在我的Reactjs应用程序。我在我的系统中使用了react 18版本和Node.js 16版本。
Home.js
import React from "react";
import { Error, Loader, Products } from "../components";
import { useGetAllProductsQuery } from "../redux/
浏览 5提问于2022-11-03得票数 1
1回答
我正试着写一个定制的抓取钩子，但我想我遗漏了什么。
import React, { useContext } from 'react';
import { Context } from "../components/context";
const fetchHook = async(url: string, bearer: string, method: string, body: any ) => {
const { global } = useContext(Context) as {global: any};
let headers
浏览 2提问于2019-10-04得票数 1
回答已采纳
当我导航到嵌套堆栈导航器时，我想显示屏幕/面包屑的路径，我使用的是react导航v5。
浏览 2提问于2020-08-02得票数 2
回答已采纳
React钩子刚刚在上一个React版本16.8.1中发布，提供了用于使用状态、效果和上下文的钩子。
如何构建自定义钩子？
浏览 1提问于2019-02-10得票数 0
回答已采纳
我有一条路线
<Route path="/search/:slug"><SearchPage /></Route>
在我的反应路由器。SearchPage是一个使用react-router-dom提供的useParams()钩子的组件。
// SearchPage.js
import React from 'react';
import { useParams } from 'react-router-dom';
export function SearchPage(props) {
const {
浏览 1提问于2020-12-22得票数 5
回答已采纳
1回答
从自定义钩子到saga的数据
、、、、
我要把一些Redux商店从Redux转移到reactQuery，因为他们不需要在Redux里面。现在，我已经将一个国家数组从一个商店移到了一个用rectQuery调用API的定制钩子上。
现在，另一个传奇需要使用国家数组。但看上去我不能在一部传奇里打个钩子。我知道错误：
错误: React "useCountries“在函数"onSearchInit”中被调用，该函数既不是React函数组件，也不是自定义React函数。React组件名称必须以大写字母开头。名称必须以“使用”一词开头。反应钩/钩规则
我像这样进口我的钩子：
import { useCountries } fro
浏览 6提问于2022-07-28得票数 1
下面是错误。
无效钩子呼叫。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React的不匹配版本和呈现器(例如React )，您可能正在违反Hooks的规则，您可能在同一个应用程序中有多个React副本。
有关如何调试和修复此问题的技巧，请参阅(我无法添加链接)。
您可能有React和呈现器(例如renderer )的不匹配版本
这是我的密码。这是违反了钩子的规则，还是其他的问题？
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
浏览 8提问于2022-04-22得票数 1
1回答
我正在使用Next.js、TypeScript、TailwindCSS、ReactHookForm和Yup构建一个应用程序。
一切正常，它验证、抛出和显示错误，但当我使用ReactHookForm抛出错误并将它们传递给我的输入组件时，我会得到一个输入错误。
我的代码：
const {
register,
handleSubmit,
formState: { errors },
setValue
} = useForm({ resolver: yupResolver(signUpFormSchema) });
return (
<>
浏览 9提问于2022-08-05得票数 2
回答已采纳
我使用react的上下文来跨组件共享数据。
例如，我可以创建一个用户上下文：
const useFirebaseUser = () => {
const [user, setUser] = useState({} as User);
useEffect(() => {
return firebase.auth().onAuthStateChanged((user) => {
if (user) {
const { displayName, photoURL, uid } = user;
setUser({
浏览 3提问于2020-07-27得票数 0
我是一个较新的开发人员，只是直接钻研盖茨比。我有一个工作数据库，graphql端点可以在沙箱页面中正常工作，但是当我将查询移动到一个由组件调用的钩子中时，我会遇到一个错误
React "useStaticQuery“在函数"getCoinsByBuzz”中被调用，该函数既不是React函数组件，也不是自定义React函数。React组件名称必须以大写字母开头。名称必须以“使用”一词开头
代码非常类似于Gatsby文档上的示例。
import { graphql, useStaticQuery } from "gatsby";
export const
浏览 6提问于2022-01-28得票数 1
2回答
我真的是个新手，我有这个
import Axios from "axios";
import { useAuth } from "react-oidc-context";
const ProductService = {
getProductList: () => {
return Axios({
method: "get",
url: "<myurl>",
headers: {
&#
浏览 2提问于2021-09-22得票数 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
我有这个组件：
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import inputAction from '../../redux/actions/inputActions';
import clienteActions from '../../redux/actions/clientesAction';
const clientes = () => {
const dispatch = u
浏览 1提问于2021-04-03得票数 2
我想读取并打印react应用程序中的当前URL。现在我正在使用"window.location.pathname“来读取网址，但是我想知道是否有更好的方法或者一些react方式来读取网址
浏览 5提问于2018-08-23得票数 6
开始尝试使用react query，并在考虑是否可以使用它作为redux的替代品？我发现react查询在nextJS中更容易使用(特别是如果我想在服务器上设置一个状态)，所以希望有一个不需要函数的useQuery (类似于redux的useSelect )。
这样的事情是否可能(这不起作用，但说明了我想要实现的目标)？即使用react查询作为缓存数据，能够订阅该缓存数据.
function InputHeaderContainer() {
return (
<div>
<InputHeader />
<InputBar />
浏览 4提问于2022-04-07得票数 0
我正在尝试创建一个小库来清理这个模式。
const [a, setA] = useState(1)
const [b, setB] = useState(2)
const [c, setC] = useState(3)
const [d, setD] = useState(4)
const [e, setE] = useState(5)
// ...
变成这样的东西。
s({
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
}, true)
我的想法是遍历提供给s()函数的对象，并将每个键/值添加到状态保持对象，如下所示：
st = {
a: 1,
set
浏览 4提问于2019-04-07得票数 1
回答已采纳
1回答
我为警告框编写了以下钩子：
import MuiAlert from '@material-ui/lab/Alert';
import { Snackbar } from '@material-ui/core';
import React from 'react';
export const useAlert = () => {
const [open, setOpen] = React.useState(false);
const [message, setMessage] = React.useState('&
浏览 2提问于2021-04-14得票数 10
1回答
我按照marmelab文档来应用角色库限制：。
我已经成功地应用到我的资源部分：“限制对资源或视图的访问”和我的菜单部分：“限制对菜单的访问”。但是，关于我认为文档中缺少并且还没有找到解决方案的事情，就是如何将这种类型的限制应用于customRoutes。
function App() {
return (
<Admin
theme={MyTheme}
layout={MyLayout}
history={history}
customRoutes={[
<PrivateRoute
exact
浏览 8提问于2021-12-10得票数 3
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
回答已采纳
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
回答已采纳
我试图理解在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
在这个例子中，我有这个react类：
class MyDiv extends React.component
constructor(){
this.state={sampleState:'hello world'}
}
render(){
return <div>{this.state.sampleState}
}
}
问题是，我是否可以在其中添加React钩子。我知道React-Hooks是React Class风格的替代。但是，如果我希望慢慢迁移到React钩子中，我可以将有用的钩子添加到类中吗？
浏览 4提问于2018-11-19得票数 62
早上好!
我正在启动react钩子，但是当我想要使用useEffect时，它抛出了以下错误：
Line 4:5: React Hook "useEffect" is called in function "profile" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
代码如下：
profile.js
import React, { useEffect } from 'react';
浏览 2提问于2020-09-26得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
