替换这个

export default app;

用这个

export default App;

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”前缀开头，并且必须在驼峰大小写中

正如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'

所以这里的名字也要改

使用大写字母定义功能组件名称/ React挂钩自定义组件。const 'app'应该是const 'app'。

App.js

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

const App = props => {
  const [personState, setPersonState] = useState({
    persons : [
          {name: 'a', age: '1'},
          {name: 'b', age: '2'},
          {name: 'c', age: '3'}
    ]
  });

    return (
      <div>
     <Person name = {personState.persons[0].name} age={personState.persons[0].age}> First </Person>
     <Person name = {personState.persons[1].name} age={personState.persons[1].age}> Second </Person>
     <Person name = {personState.persons[2].name} age={personState.persons[2].age}> Third </Person>    
    );
};
export default App;

Person.js

import React from 'react';

const person = (props) => {
return (
        <div>
<p> My name is {props.name} and my age is {props.age}</p>
<p> My name is {props.name} and my age is {props.age} and {props.children}</p>
<p>{props.children}</p>
        </div>
)
};

[反应物][useState][反应物]

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

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