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

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

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;

当前回答

就像最佳实践一样，在Person组件中使用props元素之前，尝试解构它。也要使用函数组件而不是常量。(这样更容易混淆，你可以更快地完成任务)

function ({person}) {
  const name={person.name}
  return (
    <h2>{name}</h2>
  )
}

2021-07-18 10:54:02

其他回答

你的代码

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;

会有用的谢谢。

2021-05-01 02:35:21

        import React, { useState } from "react"

    const inputTextValue = ({ initialValue }) => {
        const [value, setValue] = useState(initialValue);
        return {
            value,
            onChange: (e) => { setValue(e.target.value) }
        };
    };

    export default () => {
        const textValue = inputTextValue("");
        return (<>
            <input {...textValue} />
        </>
        );
    }

/*"Solution I Tired Changed Name of Funtion in Captial "*/

    import React, { useState } from "react"

const InputTextValue = ({ initialValue }) => {
    const [value, setValue] = useState(initialValue);
    return {
        value,
        onChange: (e) => { setValue(e.target.value) }
    };
};

export default () => {
    const textValue = InputTextValue("");
    return (<>
        <input {...textValue} />
    </>
    );
}

2020-05-13 15:36:41

将app大写为app肯定会起作用。

2020-01-09 11:58:56

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

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

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

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

这解决了我的问题。

2019-05-31 14:41:27

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

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

2019-04-25 15:17:44

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

推荐文章

最新文章

标签