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

export default app

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

import App from './App.js'

所以这里的名字也要改

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;

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

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;

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

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

export default Person;

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

Hooks FAQs官方解释:

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

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

export default app

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

import App from './App.js'

所以这里的名字也要改

首先，你需要大写你的组件的FirstLetter，在你的情况下app应该是app, person应该是person。

我试图复制你的代码，希望找到问题所在。由于你没有分享你如何调用App组件，我只能看到一种方法导致这个问题。

这是CodeSandbox中的链接:无效钩子调用。

为什么?因为下面的代码是错误的:

ReactDOM.render(App(), rootElement);

它应该是:

ReactDOM.render(<App />, rootElement);

更多信息，你应该阅读规则的钩子-反应

希望这能有所帮助!