Question

我只是想应用一个基本的自定义钩子，但它给出了一个错误，但它给出了一个错误
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

Answer 1

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

<块引用>

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

检查此 CodeSandBox 链接 https://codesandbox.io/s/priceless-http-q57iy?file=/src/customHook.js 并尝试粘贴下面提到的代码，您将看到通过更改组件的名称，错误 React Hook "useState" is called in function "usecount" that is neither a React function component nor a custom React Hook function. 将消失。

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

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

1 个答案: