用于递增和递减的基本自定义挂钩，但不起作用

Question

我只是想应用一个基本的自定义钩子，但它给出了一个错误，但它给出了一个错误，因为
在函数“usecount”中调用了 React Hook“useState”，它既不是 React 函数组件，也不是自定义 React Hook 函数。

import { useState } from 'react'

function usecount() {

const [count,setCount] = useState(0)

const increment = () =>{
    setCount(prev => prev + 1)
}

const decrement = () =>{
    setCount(prev => prev - 1)
}

const reset = () =>{
    setCount(0)
}
return [count,increment,decrement,reset]
}

export default usecount

Answer 1

这是因为您的组件名称是小写的。

组件的名称应该是驼峰式的。

检查此 CodeSandBox 链接https://codesandbox.io/s/priceless-http-q57iy?file=/src/customHook.js并尝试粘贴下面提到的代码，您将通过更改组件名称看到该错误：

React Hook "useState" 在函数 "usecount" 中调用，它既不是 React 函数组件也不是自定义 React Hook 函数。

会消失。

import { useState } from 'react'

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

    const increment = () =>{
        setCount(prev => prev + 1);
    }

    const decrement = () =>{
        setCount(prev => prev - 1);
    }

    const reset = () =>{
        setCount(0);
    }

    return [count,increment,decrement,reset];
}
export default useCount