不要使用箭头函数创建功能组件。

按照下面的例子做:

function MyComponent(props) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
}

Or

//IMPORTANT: Repeat the function name

const MyComponent = function MyComponent(props) { 
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
};

如果你有“ref”的问题(可能在循环中)，解决方案是使用forwardRef():

// IMPORTANT: Repeat the function name
// Add the "ref" argument to the function, in case you need to use it.

const MyComponent = React.forwardRef( function MyComponent(props, ref) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
});

试着把“app”大写

const App = props => {...}

export default App;

在React中，组件需要大写，自定义钩子需要从使用开始。

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

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;

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

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

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

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

ReactDOM.render(App(), rootElement);

它应该是:

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

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

希望这能有所帮助!

在函数名中使用首字母大写。

function App(){}

只要试着将你的应用程序名称大写即可

const App = props => {...}

export default App;