我试图使用反应钩子来解决一个简单的问题

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钩子useState在函数中被调用 “app”既不是React函数组件,也不是自定义React 钩子函数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; 

当前回答

用户定义的组件必须大写。在你的例子中,你使用了const app = props =>{}。在“app”中,“a”是小写的,你必须尝试使用“app”

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file. React recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

更多详情请查阅官方文件 点击这里

其他回答

据我所知,这个包里包括一个绒线。它要求你的组件应该从大写字母开始。 请核对一下。

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

无论何时使用React功能组件,始终保持组件名称的首字母为大写,以避免这些React Hooks错误。

在你的例子中,你已经将组件命名为app,正如我上面所说的,应该将其更改为app,以避免React Hook错误。

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;

我有同样的问题,但不是与应用程序。我有一个自定义类,但使用小写字母开始函数名,也收到了错误。

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

在我的案例中,最终结果是这样的:

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

这解决了我的问题。

正如Yuki已经指出的那样,解决方案是将组件名称大写。需要注意的是,不仅“默认”App组件需要大写,所有组件都需要大写:

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

export default Person;

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

Hooks FAQs官方解释:

我们提供了一个ESLint插件,它强制hook的规则以避免错误。它假定任何以“use”开头且后面紧跟大写字母的函数都是Hook。我们认识到这种启发式并不完美,可能会有一些误报,但如果没有一个生态系统范围内的约定,就没有办法让Hooks很好地工作——较长的名称会阻碍人们采用Hooks或遵循约定。