React Hook ‘useState’ 在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用

要解决错误“在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用 React Hook ‘useState’”的错误，请将函数名称的第一个字母大写，或者在函数名称前面加上，例如use使其useCounter成为组件或自定义挂钩。

在既不是的函数中调用 React hook usestate

下面是错误如何发生的示例。

应用程序.js

复制了！
import React, {useState} from 'react';

// 👇️ Not a component (name starts with lowercase)
// Also not a custom hook (name doesn't start with use)
function counter() {
  // ⛔️ React Hook "useState" is called in function "counter" that
  // is neither a React function component nor a custom React Hook function.
  // React component names must start with an uppercase letter.
  // React Hook names must start with the word "use"
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

上面代码示例中的问题是我们在
不是组件的函数内部使用useStateuse挂钩，因为它以小写字母开头，而不是自定义挂钩，因为它的名称不是以.

组件首字母大写

如果您打算声明一个组件，请将函数的第一个字母大写。

应用程序.js

复制了！
import React, {useState} from 'react';

// 👇️ is now a component (name starts with uppercase letter)
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

组件名称必须以大写字母开头，因为这有助于 React 区分内置元素，如div,button和p我们定义的组件。

就像
文档所述：

仅从 React 函数组件或自定义挂钩调用挂钩。
只调用顶层的钩子
不要在循环、条件或嵌套函数内调用钩子
在任何早期返回之前，始终在 React 函数的顶层使用钩子

自定义钩子的所有名称必须以`use`

如果您打算声明自定义挂钩，则自定义挂钩的名称必须以开头use，例如useCounter。

应用程序.js

复制了！
import React, {useState} from 'react';

// 👇️ is now a custom hook (name starts with use)
function useCounter() {
  const [count, setCount] = useState(0);

  return [count, setCount];
}

export default function App() {
  const [count, setCount] = useCounter();

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

自定义钩子的名称必须以 React 开头，use以便将您的函数识别为自定义钩子。

React Hook“useEffect”在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用

要解决错误“在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用 React Hook ‘useEffect’”的错误，请大写函数名称的第一个字母，或者在函数名称前面加上前缀，例如use使其useCounter成为组件或自定义挂钩。

在函数中调用 React hook useEffect

下面是错误如何发生的示例。

应用程序.js

复制了！
import React, {useEffect, useState} from 'react';

// 👇️ Not a component (lowercase first letter)
// not a custom hook (doesn't start with use)
function counter() {
  const [count, setCount] = useState(0);

  // ⛔️ React Hook "useEffect" is called in function "counter" that
  // is neither a React function component nor a custom React Hook function.
  // React component names must start with an uppercase letter.
  // React Hook names must start with the word "use".
  useEffect(() => {
    console.log(count);
  }, [count]);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

上面代码示例中的问题是，我们
在一个不是组件的函数内使用useEffectuse挂钩，因为它以小写字母开头，并且不是自定义挂钩，因为它的名称不以开头。

将函数或类组件的首字母大写

如果您打算声明一个组件，请将函数的第一个字母大写。

应用程序.js

复制了！
import React, {useEffect, useState} from 'react';

// 👇️ is now a component (can use hooks)
function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  }, [count]);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

组件名称必须以大写字母开头，因为这有助于 React 区分内置元素，如p,div和span我们定义的组件。

就像
文档所述：

仅从 React 函数组件或自定义挂钩调用挂钩。
只调用顶层的钩子
不要在循环、条件或嵌套函数内调用钩子
在任何早期返回之前，始终在 React 函数的顶层使用钩子

以您的自定义挂钩的名称开头`use`

如果您打算声明自定义挂钩，则自定义挂钩的名称必须以开头use，例如useCounter。

应用程序.js

复制了！
import React, {useEffect, useState} from 'react';

// 👇️ is a custom hook (name starts with use)
function useCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  }, [count]);

  return [count, setCount];
}

export default function App() {
  const [count, setCount] = useCounter();

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

自定义钩子的名称必须以 React 开头，use以便将您的函数识别为自定义钩子。

React Hook ‘useState’ 在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用

目录

React Hook ‘useState’ is called in function that is neither a React function component nor a custom React Hook function