React Hook "useState" 在函数 "app" 中被调用，但该函数既不是 React 函数组件也不是自定义的 React Hook 函数。

Question

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

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

具有以下依赖项。

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

但我仍然收到以下错误：

./src/App.js

第7行：
React Hook“useState”在函数“app”中被调用，而它既不是React函数组件也不是自定义的React Hook函数 react-hooks/rules-of-hooks

第39行：
'state'未定义
no-undef

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

组件代码如下：

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; 

- Bishnu

---

你能分享一下你的组件代码吗？ - Sachin

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>这是React</h2>
<Person name={personState.person[1].name} age="27"></Person> <Person name={personState.person[2].name} age="4"></Person> </div> ); };export default app; - Bishnu

人员组件：-从'react'导入React;const person = (props) => { 返回( <div> <h3>我是{props.name}</h3> <p>我{props.age}岁了</p> <p>{props.children}</p> </div> )} export default person; - Bishnu

阅读这样的共享代码真是一场噩梦，要尊重他人。 - Alexey Nikonov

我也在学习Maximilian的React课程时遇到了同样的问题。 - GDG612

组件名称及其导出的名称应为App 替换为：

1. const app --> const App
2. export default app --> export default App;

- Avinash Boddu

Answer 1

试着像这样大写“app”

const App = props => {...}

export default App;

在 React 中，组件名称需要大写，并且自定义钩子需要以 use 开头。

- YUKI

---

这是一个在应用程序中很难发现的错误，我认为应该添加另一个注释到错误信息中，以指出这种可能性。 - Mark E

这是因为在Hooks规则的ESLint插件中，有一个检查来验证组件或函数名是否有效：检查节点是否为React组件名称。React组件名称必须始终以非小写字母开头。。 - HGomez

大写字母 A 在 App 中对我有效，但是现在我在想为什么 Max 在 Udemy 课程中没有遇到这个错误？ - Ashish Sharma

同一个问题：“为什么Max没有收到任何错误提示？我将'app'改为'App'，现在它可以工作了！” - Forhad

谢谢，命名是我没有检查的问题。 - Deepak Soni

Answer 2

我觉得我们在Udemy上正在学习同一门课程。

如果是这样，请将

const app

改为

const App

同样的方法也适用于

export default app

export default App

对我来说它运作良好。

- Tuan Phan

---

好的，我会尽力进行翻译。请问您需要什么内容的翻译？ - MeltingDog

这应该被标记为正确答案。默认情况下，“主组件”的名称必须大写。还要记得使用大写字母导入组件。错误示范：import compo from './Compo';正确示范：import Compo from './Compo';因为React将大写的JSX标签识别为React组件。 - Marcos R

为什么它区分大小写呢？ - Kipruto

Answer 3

据我所知，这个包中包含了一个代码检查工具。它要求你的组件名称应该以大写字母开头。请进行检查。

然而对于我来说，这很令人遗憾。

- alerya

---

感谢您节省了我的时间。 - Always_a_learner

Answer 4

函数名的首字母应大写。

function App(){}

- Kelum Sampath Edirisinghe

---

首先，你需要将组件的第一个字母大写，对于你的情况，app 应该是 App，person 应该是 Person。 - Pochmurnik

这个问题已经得到了回答，应该将其标记为答案。简单的解决方案已经被解释清楚了。 - user2112618

Answer 5

React组件（包括函数和类组件）必须以大写字母开头。比如

const App=(props)=><div>Hey</div>

class App extends React.Component{
   render(){
     return <div>Hey</div>
   }
}

React遵循这种语义来识别用户定义的组件。React的JSX转译为React.createElement函数，该函数返回dom节点的对象表示形式。该对象的type属性告知其是用户定义的组件还是像div这样的dom元素。因此，遵循这种语义非常重要。

由于useState hook只能在函数组件（或自定义hook）内部使用，这就是为什么您会收到错误信息的原因，因为React首先无法将其识别为用户定义的组件。

useState也可以用于自定义hook中，用于逻辑的重用和抽象化。因此，根据Hooks规则，自定义hook的名称必须以“use”前缀开头，并且必须采用驼峰命名法。

- Akash Singh

---

是的，对于 react-complete-guide 项目，它对我起作用了。 - Bob Small

这解决了我的问题，谢谢。问题在于函数名以小写字母开头。 - Kareem Khaleel

Answer 6

使用const App而不是const app。

- Jyothish s nair

Answer 7

试着将您的应用程序名称大写

const App = props => {...}

export default App;

- Pratik Garg

---

你是指文档标题吗？ - msahin

它可以工作了，谢谢。 - Dev Rupinder

Answer 8

您遇到了这个错误："React Hook "useState" is called in function "App" which is neither a React function component or a custom React Hook function"

解决方案：您需要将函数名称开头字母大写。

例如：

const Helper =()=>{}

function Helper2(){}

- ASHISH R

Answer 9

你的函数的第一个字符应该是大写字母

- rubimbura brian

---

哇，我总是忘记这个。谢谢 :) - Dzenis H.

Answer 10

我也遇到了同样的问题。原来是“App”中的“A”大写造成的问题。 此外，如果您使用了导出：export default App;请确保导出的名称与“App”相同。

- samceena