在函数“ app”中调用React Hook“ useState”，该函数既不是React函数组件也不是定制的React Hook函数

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

作为以下示例之一执行：

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

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

要么

//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 })}
    />
  );
});

步骤1：将文件名src / App.js更改为src / app.js

步骤2：点击“是”以“更新app.js的导入”。

步骤3：再次重新启动服务器。

使用const App代替const app

首先，您需要将组件的FirstLetter大写，在这种情况下，app应该是App，person应该是Person。

我试图复制您的代码，以期发现问题。由于您没有分享如何调用App组件，因此我只能看到一种导致问题的方法。

这是CodeSandbox中的链接：Invalid hook call。

为什么？由于下面的代码是错误的：

ReactDOM.render(App(), rootElement);

应该是：

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

欲了解更多信息，您应该阅读钩子规则-React

希望这可以帮助！

正如Yuki已经指出的，解决方案是大写组件名称。请务必注意，不仅“大写” App组件需要大写，而且所有组件也都必须大写：

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

export default Person;

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

Hooks常见问题解答的官方解释：

我们提供了一个ESLint插件，该插件可以强制执行Hooks规则以避免错误。它假定任何以“ use”开头且紧随其后的是大写字母的函数都是“挂钩”。我们认识到这种启发式方法不是完美的，并且可能会有一些误报，但是如果没有整个生态系统的约定，就无法使Hooks正常工作-较长的名称将使人们不愿采用Hooks或遵循约定。

在JSX中，小写标记名称被视为html本机组件。为了将React函数识别为React组件，需要大写名称。

Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX <Foo /> expression, Foo must be in scope.

https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components

解决方法很简单，正确的“ app”并用大写第一个字符写“ App”。

将应用程序大写为App肯定会起作用。

函数的第一个字符应为大写

我遇到了同样的问题，但应用程序却没有。我有一个自定义类，但使用小写字母开头的函数名称，并且还收到错误。

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

就我而言，最终结果是这样的：

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

这解决了我的问题。

React组件名称应大写，自定义钩子函数应以use关键字开头，以标识为React 钩子函数。

因此，将您的应用程序组件大写为App

我遇到过同样的问题。原来是在“ App”中将“ A”大写的问题。另外，如果要导出，请export default App;确保也导出相同名称的“ App”。

组件应以大写字母开头。还记得更改出口行中的第一个字母！

您将收到此错误：“在函数“ App”中调用了React Hook“ useState”，它既不是React函数组件也不是自定义的React Hook函数”

解决方案：您基本上需要将功能大写。

例如：

const Helper =()=>{}

function Helper2(){}

只需大写您的应用名称

const App = props => {...}

export default App;

在函数名称中使用首字母大写。例如：-功能App {}

据我所知，这个包装中包含了短绒棉。并且它要求您的组件应该从大写字母开始。请检查一下。

然而，对我而言，这是可悲的。

我觉得我们在乌迪米（Udemy）正在做同样的课程。

如果是这样，请大写

const app

至

const App

做的以及

export default app

至

export default App

这对我来说很有用。

尝试将“ app”大写，例如

const App = props => {...}

export default App;