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

Question

我正在尝试使用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行： 未定义
“状态”

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

Answer 1

尝试将“ app”大写，例如

const App = props => {...}

export default App;

Answer 2

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

如果是这样，请大写

const app

至

const App

做的以及

export default app

至

export default App

这对我来说很有用。

Answer 3

React 组件（函数式和类）必须以大写字母开头。喜欢

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

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

React 通过遵循此语义识别用户定义的组件。React 的 JSX 转换为 React.createElement 函数，该函数返回 dom 节点的对象表示。这个对象的 type 属性告诉它是一个用户定义的组件还是一个 dom 元素，比如 div。因此，遵循此语义很重要

由于 useState 钩子只能在功能组件（或自定义钩子）中使用，这就是您收到错误的原因，因为 react 无法首先将其识别为用户定义的组件。

useState 也可以在用于可重用性和逻辑抽象的自定义钩子中使用。所以根据hook的规则，自定义hook的名字必须以“use”前缀开头，并且必须是驼峰式

Answer 4

使用 const App 而不是 const app

Answer 5

尝试将您的应用名称大写

const App = props => {...}

export default App;

Answer 6

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

然而，对我而言，这是可悲的。

Answer 7

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

Answer 8

use first letter capital in the function name. eg:- function App{}

Answer 9

函数名必须以大写字母开头

例如：

const App = props => {

}

不是常量应用程序

Answer 10

你有正确的进口吗？

import React, { useState } from 'react';

Answer 11

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

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

例如：

const Helper =()=>{}

function Helper2(){}

Answer 12

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

Answer 13

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

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

Answer 14

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

Answer 15

你的代码

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, {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;

它会工作谢谢。