在函数“app”中调用React钩子“useState”，该函数既不是React函数组件，也不是自定义React[duplicate]

Question

我正在跟随一个关于Udemy的反应课程。现在我达到了我的代码的这一点

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必须是PascalCaseapp。这是为了使它成为一个组件。

将const-app=重命名为const-app=