反应钩子“useState"在函数“app"中调用它既不是 React 函数组件，也不是自定义的 React Hook 函数 [英] React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function

问题描述

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

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

具有以下依赖项.

依赖项":{反应":^ 16.8.6"，"react-dom": "^16.8.6",反应脚本":3.0.0"}

但我仍然收到以下错误:

<块引用>

./src/App.js

第 7 行:
React Hook "useState" 在函数中被调用app"既不是 React 函数组件，也不是自定义 React钩子函数 react-hooks/rules-of-hooks

第 39 行:
状态"未定义
无未定义

搜索关键字以详细了解每个错误.

组件代码如下:

import React, {useState} from 'react';导入'./App.css';从'./Person/Person'导入人；const app = props =>{const [personState, setPersonSate] = useState({ person:[ {name:'bishnu',age:'32'}, {name:'rasmi',age:'27'}, {name:'fretbox',age:'4'}], });返回 (<div className="应用程序"><h2>这是反应</h2><人名={personState.person[1].name} age="27"></Person><人名={personState.person[2].name} age="4"></Person>

);};导出默认应用程序；

人物组件

从'react'导入React；const person = props =>{返回(<div><h3>我是{props.name}</h3><p>我是 {props.age} 岁</p><p>{props.children}</p>

)};出口违约人；

解决方案

尽量大写 'app' like

const App = props =>{...}导出默认应用程序；

在React中，组件需要大写，自定义hook需要以use开头.

I'm trying to use react hooks for a simple problem

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

with following dependencies.

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

but I'm still getting the following error:

./src/App.js

Line 7:
React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks

Line 39:
'state' is not defined
no-undef

Search for the keywords to learn more about each error.

Component code is below:

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;

Person component

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; 

解决方案

Try to capitalize 'app' like

const App = props => {...}

export default App;

In React, components need to be capitalized, and custom hooks need to start with use.

这篇关于反应钩子“useState"在函数“app"中调用它既不是 React 函数组件，也不是自定义的 React Hook 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！