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

Question

我正在关注Udemy上的React课程。现在我达到了我的代码

的这一点

import React, { useState } from 'react';
import Person from  './Person/Person';
import './App.css';
const app = props => {
    const [personState, setPersonState] = useState({
        persons: [
            {name: "Fil", age: 30}
        ],
        other: "other"
    });
    const switchHandler = () => {
        setPersonState({
            persons: [
                {name: "Fil", age: 40}
            ]
        })
    };
    return (
        <div className="App">
            <h1>I'm a react developer</h1>
            <Person name={personState.persons[0].name} age={personState.persons[0].age}>I am a children</Person>
            <button onClick={switchHandler}>Switch Name</button>
        </div>
    );
}
export default app;

编译了我遇到此错误消息后，我不知道该怎么做或表示

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

Answer 1

您的app必须是Pascalcase App。它是将其称为组成部分。

将const app =重命名为const App =