React Hook "useState" 在函数 "app" 中调用,它既不是 React 函数组件,也不是自定义的 React Hook 函数

IT技术 reactjs react-hooks
2021-04-04 04:03:02

我正在尝试使用 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 行:
在函数“app”中调用 React Hook“useState”,它既不是 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; 
6个回答

尝试将“应用程序”大写,例如

const App = props => {...}

export default App;

在 React 中,组件需要大写,自定义钩子需要以use.

这是应用程序中一些难以找到的错误,我认为应该在错误消息中添加另一条注释以指出这种可能性。
2021-06-01 04:03:02
在 App 中大写 A 对我有用......但我不是在想为什么 max 在 udemy 课程中没有得到这个错误?
2021-06-05 04:03:02
这样做的原因是在Hooks ESLint 插件规则中,有一个检查组件或函数名称是否有效:Checks if the node is a React component name. React component names must always start with a non-lowercase letter.
2021-06-09 04:03:02
同样的问题“为什么 max 没有收到任何错误?我将“应用程序”更改为“应用程序”,现在它对我有用!
2021-06-18 04:03:02

我觉得我们在 Udemy 上做同样的课程。

如果是这样,只需大写

const app

const App

export default app

export default App

这对我来说很有用。

是的,我认为这让我们三个人做同样的课程。为什么它区分大小写?
2021-05-26 04:03:02
这应该被标记为正确答案。默认情况下,“主要组件”名称必须大写。还要记住使用大写名称导入组件。错误:从 './Compo' 导入组合;右:从 './Compo' 导入 Compo;由于 react 将大写的 JSX 标签识别为 react 组件。
2021-06-12 04:03:02
为什么区分大小写?
2021-06-20 04:03:02

据我所知,这个包中包含一个 linter。并且它要求你的组件应该从大写字符开始。请检查一下。

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

谢谢你节省我的时间。
2021-06-16 04:03:02

在函数名称中使用首字母大写。

function App(){}
这已经得到回答,这应该被标记为答案。简单的解决方案解释正确。
2021-05-27 04:03:02
“首先,您需要将组件的 FirstLetter 大写,在您的情况下,app 应该是 App,person 应该是 Person。” 已经有人写了...
2021-06-07 04:03:02

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”前缀开头,并且必须是驼峰式的

是的,我为 react-complete-guide 项目工作
2021-06-06 04:03:02
这解决了我的问题,谢谢。问题是函数名称以小后者开头
2021-06-20 04:03:02