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

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

export default Person;

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

Hooks FAQs官方解释:

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

我觉得我们在Udemy上的课程是一样的。

如果是，则大写

const应用

To

const应用

做得和做得一样好吗

export default app

To

export default App

这对我来说很有效。

我有同样的问题，但不是与应用程序。我有一个自定义类，但使用小写字母开始函数名，也收到了错误。

将函数名的第一个字母和导出行更改为CamelCase，错误消失。

在我的案例中，最终结果是这样的:

function Document() {
....
}
export default Document;

这解决了我的问题。

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

按照下面的例子做:

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中，组件需要大写，自定义钩子需要从使用开始。

函数名必须以大写字母开头

为例:

const App = props => {

}

不是const应用程序