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

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; 

当前回答

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

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

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

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

这解决了我的问题。

其他回答

组件应以大写字母开头。还记得将行中的第一个字母改为export!

如果你仍然在寻找这个问题的答案,以上所有的解决方案都很好,但我仍然会提供以下运行/正确的代码(编辑)

import React, { useState } from 'react';
import './App.css';
import Person from './Person/Person'

  const App = props => {
    const [personsState, setPersonsState ] = useState({
      persons:[
        {name: 'Ram', age: 20},
        {name: 'Rahul', age: 24},
        {name: 'Ramesh', age: 25}
      ],
      otherState: 'Some Other value' 
    });

    const switchNameHandler = () => {
      //console.log('Click is working');
      //Dont Do THIS: this.state.persons[0].name = 'singh';
      setPersonsState({
        persons:[
        {name: 'Ram',age: 20},
        {name: 'Raj', age: 24},
        {name: 'yts', age: 30} 
      ]
    });
    };

    return (
      <div className="App">
        <h1>Nice two one three  Hello i am a noob react developer</h1>
        <button onClick={switchNameHandler}>Switch Name</button>
        <Person name={personsState.persons[0].name} age={personsState.persons[0].age} />
        <Person name={personsState.persons[1].name} age={personsState.persons[1].age}> My hobbies are Gaming</Person>
        <Person name={personsState.persons[2].name} age={personsState.persons[2].age} />
      </div>
    ); 
    // return React.createElement('div',{className:'App'}, React.createElement('h1', null, 'Hi learning the basics of react'));
}

export default App;

我想你们学的课程和我学的是一样的因为你们在这里使用了完全相同的变量名,实际上你们遗漏了一点就是你把应用的名字改成了小写

export default app

有一个小错误,就是在index.js中更改名称,你在App.js中更改了名称,但在index.js中忘记更改名称,你仍然像这样导入它

import App from './App.js'

所以这里的名字也要改

React组件(包括函数组件和类组件)必须以大写字母开头。就像

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

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

React通过遵循这个语义来标识用户定义的组件。React的JSX编译到React。createElement函数,返回dom节点的对象表示形式。该对象的type属性告诉我们它是用户定义的组件还是像div这样的dom元素。因此,遵循这个语义是很重要的

由于useState钩子只能在函数组件(或自定义钩子)内部使用,这就是为什么你得到错误的原因,因为react不能首先将其标识为用户定义的组件。

useState也可以在自定义钩子中使用,用于可重用性和逻辑抽象。因此根据钩子的规则,自定义钩子的名称必须以“use”前缀开头,并且必须在驼峰大小写中

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

把你的app组件大写为app