在函数“ app”中调用React Hook“ useState”,该函数既不是React函数组件也不是自定义React Hook函数


148

我正在尝试使用React钩子解决一个简单的问题

const [personState,setPersonState] = useState({ DefinedObject });

具有以下依赖性。

"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.0"
}

但我仍然收到以下错误:

./src/App.js

第7行:
在函数“ app”中调用React Hook“ useState”,该函数既不是React函数组件也不是定制的React Hook函数react-hooks / rules-of-hooks

第39行: 未定义
“状态”

搜索关键字以了解有关每个错误的更多信息。

组件代码如下:

import React, {useState} from 'react'; 
import './App.css'; 
import Person from './Person/Person'; 

const app = props => { 
    const [personState, setPersonSate] = useState({ person:[ {name:'bishnu',age:'32'}, {name:'rasmi',age:'27'}, {name:'fretbox',age:'4'} ], }); 
    return (
        <div className="App"> 
            <h2>This is react</h2> 
            <Person name={personState.person[1].name} age="27"></Person>
            <Person name={personState.person[2].name} age="4"></Person> 
        </div> ); 
    };
    export default app;

人组成

import React from 'react'; 

const person = props => { 
    return( 
        <div>
            <h3>i am {props.name}</h3>
            <p>i am {props.age} years old</p>
            <p>{props.children}</p>
        </div> 
    )
};

export default person; 

1
您可以共享您的组件代码吗?
萨钦

从'react'导入React,{useState}; 导入'./App.css'; 从'./Person/Person'导入Person;const app = props => {const [personState,setPersonSate] = useState({person:[{name:'bishnu',age:'32'},{name:'rasmi',age:'27'},{name :'fretbox',age:'4'}],}); return(<div className =“ App”> <h2>这是反应</ h2> <人员名称= {personState.person [1] .name} age =“ 27”> </ Person> <人员名称= {personState .person [2] .name} age =“ 4”> </ Person> </ div>);};导出默认应用;
比什努

人员组件:-从“反应”导入React;const person =(props)=> {return(<div> <h3>我是{props.age} </ h3> <p>我是{props.age}岁</ p> <p> {props。儿童} </ p> </ div>)}导出默认人员;
比什努

5
阅读此类共享代码真是个地狱,请尊重他人
AlexNikonov

5
在Maximilian React课程中,我也遇到了同样的问题。
GDG612

Answers:


335

尝试大写“ app”,例如

const App = props => {...}

export default App;

在React中,组件需要大写,自定义钩子必须以开头use


26
这是在应用程序中很难找到的错误,我认为应该在错误消息中添加另一条注释来指出这种可能性。
马克E

22
原因是在“ 规则的Hooks ESLint插件”中,检查是否有组件或函数名称有效:Checks if the node is a React component name. React component names must always start with a non-lowercase letter.
HGomez

11
在App中将A大写对我有用...但我不是在想为什么max在udemy课程中没有出现此错误?
Ashish Sharma

8
同样的问题“为什么max没有收到任何错误?我将“ app”更改为“ App”,现在对我
有用

你是上帝差遣的。我现在可能很难过一天。被祝福
kipruto

50

我觉得我们在乌迪米(Udemy)正在做同样的课程。

如果是这样,请大写

const app

const App

做的以及

export default app

export default App

这对我来说很有用。


5
是的,我认为这使我们三个人做同样的事情。为什么区分大小写?
MeltingDog

2
这应该标记为正确答案。默认情况下,“主要组件”名称必须大写。另外,请记住使用大写的名称导入组件。错误:从'./Compo'导入compo;右:从“ ./Compo”导入Compo;As react将大写的JSX标签识别为react组件。
Marcos R

1
为什么区分大小写?
kipruto

35

据我所知,这个包装中包含了短绒棉。并且它要求您的组件应该从大写字母开始。请检查一下。

然而,对我来说,这是可悲的。


由于工作就像一个魅力@alerya
karthickeyan

多谢您节省时间。
哈西默




12

您将收到此错误:“在函数“ App”中调用了React Hook“ useState”,它既不是React函数组件也不是自定义的React Hook函数”

解决方案:您基本上需要将功能大写。

例如:

const Helper =()=>{}

function Helper2(){}



10

我遇到过同样的问题。原来是在“ App”中将“ A”大写的问题。另外,如果要导出,请export default App;确保也导出相同名称的“ App”。


10

组件应以大写字母开头。还记得更改要导出的行中的第一个字母!


2
您的问题似乎没有答案。达到50名代表后,您将可以对问题发表评论。如果您的答案一个答案,请尝试对其进行改进。例如,为什么组件应该以大写字母开头?另外,其他答案已经表明,您要提供新的东西吗?
Ender Look


5

React组件名称应大写,自定义钩子函数应以use关键字开头,以标识为React 钩子函数。

因此,将您的应用程序组件大写为App


3

我遇到了同样的问题,但应用程序却没有。我有一个自定义类,但使用小写字母开头的函数名称,并且还收到错误。

将函数名称的第一个字母和导出行更改为CamelCase,错误消失了。

就我而言,最终结果是这样的:

function Document() {
....
}
export default Document;

这解决了我的问题。


2

解决方法很简单,正确的“ app”并用大写第一个字符写“ App”。


欢迎使用StackOverflow(已投票)。请输入一些代码并回答问题。
Mehdi Yeganeh



2

取代这个

export default app;

有了这个

export default App;


2
React Hook "useState" is called in function "App" which is neither a React function component or a custom React Hook function"

对于以下错误,将组件的首字母大写,例如,也将其导出。

const App  = props => {
...}
export default App;

1

正如Yuki已经指出的,解决方案是将组件名称大写。重要的是要注意,不仅“大写” App组件需要大写,而且所有组件也需要大写:

const Person = () => {return ...};

export default Person;

这是由于eslint-plugin-react-hooks包所致,特别是RulesOfHooks.js脚本中的isComponentName()函数所致。

Hooks常见问题解答的官方解释:

我们提供了一个ESLint插件,该插件可强制执行Hooks规则以避免错误。它假定任何以“ use”开头且紧随其后的是大写字母的函数都是“挂钩”。我们认识到这种启发式方法并不完美,并且可能会有一些误报,但是如果没有整个生态系统的约定,就无法使Hooks正常工作-较长的名称将使人们不愿采用Hooks或遵循约定。


1

首先,您需要将组件的FirstLetter大写,在这种情况下,app应该是Appperson应该是Person

我试图复制您的代码,以期发现问题。由于您没有分享如何调用App组件,因此我只能看到一种导致问题的方法。

这是CodeSandbox中的链接:Invalid hook call

为什么?由于下面的代码是错误的:

ReactDOM.render(App(), rootElement);

应该是:

ReactDOM.render(<App />, rootElement);

欲了解更多信息,您应该阅读钩子规则-React

希望这可以帮助!


1

使用大写字母定义功能组件名称/ React挂钩自定义组件。“ const'app'应该是const'App'。

App.js

import React, { useState } from 'react';
import { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Person from './Person/Person';

const App = props => {
  const [personState, setPersonState] = useState({
    persons : [
          {name: 'a', age: '1'},
          {name: 'b', age: '2'},
          {name: 'c', age: '3'}
    ]
  });

    return (
      <div>
     <Person name = {personState.persons[0].name} age={personState.persons[0].age}> First </Person>
     <Person name = {personState.persons[1].name} age={personState.persons[1].age}> Second </Person>
     <Person name = {personState.persons[2].name} age={personState.persons[2].age}> Third </Person>    
    );
};
export default App;

Person.js

import React from 'react';

const person = (props) => {
return (
        <div>
<p> My name is {props.name} and my age is {props.age}</p>
<p> My name is {props.name} and my age is {props.age} and {props.children}</p>
<p>{props.children}</p>
        </div>
)
};

[ReactHooks] [useState] [ReactJs]



0

每当使用React功能组件时,请始终将组件名称的首字母保留为大写,以避免出现这些React Hooks错误。

在您的情况下,您已经命名了component app,应将其更改为App,如上所述,以避免React Hook错误。


0
        import React, { useState } from "react"

    const inputTextValue = ({ initialValue }) => {
        const [value, setValue] = useState(initialValue);
        return {
            value,
            onChange: (e) => { setValue(e.target.value) }
        };
    };

    export default () => {
        const textValue = inputTextValue("");
        return (<>
            <input {...textValue} />
        </>
        );
    }

/*"Solution I Tired Changed Name of Funtion in Captial "*/

    import React, { useState } from "react"

const InputTextValue = ({ initialValue }) => {
    const [value, setValue] = useState(initialValue);
    return {
        value,
        onChange: (e) => { setValue(e.target.value) }
    };
};

export default () => {
    const textValue = InputTextValue("");
    return (<>
        <input {...textValue} />
    </>
    );
}

0

在app功能中,您拼写错误的单词setpersonSate,缺少字母t,因此应该正确setpersonState

错误

const app = props => { 
    const [personState, setPersonSate] = useState({....

解决方案

const app = props => { 
        const [personState, setPersonState] = useState({....


-3

不要使用箭头功能来创建功能组件。

作为以下示例之一:

function MyComponent(props) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
}

要么

//IMPORTANT: Repeat the function name

const MyComponent = function MyComponent(props) { 
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
};

如果您有问题"ref"(可能在循环中),则解决方案是使用forwardRef()

// IMPORTANT: Repeat the function name
// Add the "ref" argument to the function, in case you need to use it.

const MyComponent = React.forwardRef( function MyComponent(props, ref) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
});

您能否详细解释为什么“不要使用箭头功能创建功能组件”。?-谢谢
胡安

在某些情况下,例如在这种情况下,为了避免useState()出现问题:codeandbox.io/s/usestate-error-f452s
GilCarvalhoDev
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.