Question

我是初学者，正在尝试将Javascript钩子重构为Typescript 但是我无法获取按钮onClick事件来更改状态。你能帮忙吗？

这是useToggler组件

import {useState} from 'react'

function useToggler (defaultOnValue=false){
    const[istoggledOn, setIsToggledOn] = useState(defaultOnValue);

    function clickHandler(){
        setIsToggledOn(prevState => !prevState)
    }

    return [istoggledOn, clickHandler]
}

export default useToggler

这是应用程序组件

import * as React from 'react';
import './App.css';
import useToggler from './compononets/useToggler'




const App: React.FC = () => {
    const[show, toggle]=useToggler(true);

    return (
        <div className="App">
            <button onClick={()=>toggle}>+</button>
            <span>{show? "yes!": "no!"}</span>
        </div>
    );

};

export default App;

Answer 1

由于在useToggler函数中返回一个数组，因此出现类型错误。

function useToggler (defaultOnValue=false){
    const[istoggledOn, setIsToggledOn] = useState(defaultOnValue);

    function clickHandler(){
        setIsToggledOn(prevState => !prevState)
    }

    return [istoggledOn, clickHandler] // Here
}

TypeScript将return语句解释为意味着您拥有boolean或() => void的数组。这意味着您的toggle变量被标识为boolean | (() => void)类型，而不是() => void类型，因此出现错误消息：

Not all constituents of type 'boolean | (() => void)' are callable

您可以通过明确地告诉TypeScript来解决此问题，不，您不是返回T | K的数组，而是返回T和K的元组。您可以自己写出类型，但是较新版本的TypeScript可以使用as const来做到这一点：

function useToggler (defaultOnValue=false){
    const[istoggledOn, setIsToggledOn] = useState(defaultOnValue);

    function clickHandler(){
        setIsToggledOn(prevState => !prevState)
    }

    return [istoggledOn, clickHandler] as const
}

Typescript / Java自定义钩子

1 个答案: