React Hook “useState” 在函数 “app” 中被调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks rules-of-hooks - Javascript

在 React 中使用 React Hook 时，需要遵循一定的规则。其中一个重要的规则是，React Hook 只能在 React 函数组件或自定义 React Hook 函数中使用。如果在其他地方使用，就会出现错误，如下所示：

React Hook "useState" is called in function "app" which neither is a React function component or a custom React Hook function. 
React component names must start with an uppercase letter.

这个错误消息告诉我们，"useState" 钩子被调用在名为 "app" 的函数中，但是 "app" 不是一个 React 函数组件或自定义 React Hook 函数。这是因为 React Hook 只能在这两种类型的函数中使用。所以，为了解决这个错误，我们需要将 "app" 函数转换成一个 React 函数组件或自定义 React Hook 函数。

在将函数转换成 React 函数组件时，需要注意以下几点：

• 函数名必须以大写字母开头，以便 React 能够识别它是一个组件。
• 函数必须返回 JSX 元素。
• 可以使用 React Hook 来管理组件的状态。

例如，下面是一个简单的 React 函数组件，它使用了 "useState" 钩子来管理状态：

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default App;

在这个例子中，我们使用了 "useState" 钩子来创建一个名为 "count" 的状态变量和一个名为 "setCount" 的函数。"count" 变量的初始值为 0。我们还定义了一个名为 "handleClick" 的函数来处理按钮的点击事件。当按钮被点击时，我们调用 "setCount" 函数来更新 "count" 状态变量的值。

注意，在 React 函数组件中使用 React Hook 时，需要使用 "import React, { useState } from 'react';" 语句来导入 React 和 useState 钩子。

此外，如果想要将函数转换成自定义 React Hook 函数，需要遵循以下规则：

• 函数名必须以 "use" 开头，以便 React 能够识别它是一个自定义 Hook 函数。
• 自定义 Hook 函数可以使用多个 React Hook 来管理状态。
• 自定义 Hook 函数必须返回一个数组或对象，其中包含自定义 Hook 中需要共享的状态变量和函数。

例如，下面是一个简单的自定义 React Hook 函数，它使用了 "useState" 和 "useEffect" 钩子来管理状态：

import React, { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

在这个例子中，我们定义了一个名为 "useFetch" 的自定义 Hook 函数。它使用了 "useState" 钩子来定义三个状态变量，并使用 "useEffect" 钩子来发送网络请求并更新状态变量的值。最后，我们返回一个包含数据、加载状态和错误信息的对象。

注意，在自定义 React Hook 函数中使用 React Hook 时，需要使用 "import React, { useState, useEffect } from 'react';" 语句来导入 React 和需要使用的钩子。

总之，React Hook 是一种方便和灵活的管理组件状态的方式，在使用时需要遵循一定的规则以获得最佳效果。如果出现了 React Hook 在错误的地方使用的问题，可以根据上面的提示进行修复。