javascript - Using a hook in react to change boolean and get a callback - Stack Overflow

admin管理员组

文章数量:1392007

I'm trying to use a hook in React. The hook should give me a boolean and a callback. When the callback gets called the boolean should change value. When I try to retrieve the value and the callback I get an error.

Property isEnabled does not exist on type (boolean | (() => void))[]. On the line const {isEnabled, toggleCallback} = useToggle();

What am I doing wrong?

function toggleCallback(toggleCallback: () => void) {
    toggleCallback();
}

export default function FakePage(props: any) {
    const {isEnabled, toggleCallback} = useToggle();
    return (
        <div>
            <ComponentOne isEnabled={isEnabled}/>
            <button onClick={() => testToggle(toggleCallback)}>Test</button>
        </div>
    );
}

// hook
export default function useToggle() {
    let isEnabled: boolean = true;
    const toggleCallback= useCallback(() => {
        isEnabled = !isEnabled;
    }, [isEnabled]);
    return [isEnabled, toggleCallback];
}

I'm trying to use a hook in React. The hook should give me a boolean and a callback. When the callback gets called the boolean should change value. When I try to retrieve the value and the callback I get an error.

Property isEnabled does not exist on type (boolean | (() => void))[]. On the line const {isEnabled, toggleCallback} = useToggle();

What am I doing wrong?

function toggleCallback(toggleCallback: () => void) {
    toggleCallback();
}

export default function FakePage(props: any) {
    const {isEnabled, toggleCallback} = useToggle();
    return (
        <div>
            <ComponentOne isEnabled={isEnabled}/>
            <button onClick={() => testToggle(toggleCallback)}>Test</button>
        </div>
    );
}

// hook
export default function useToggle() {
    let isEnabled: boolean = true;
    const toggleCallback= useCallback(() => {
        isEnabled = !isEnabled;
    }, [isEnabled]);
    return [isEnabled, toggleCallback];
}

• javascript
• reactjs
• typescript
• react-hooks

Share Improve this question Follow edited Jun 7, 2020 at 10:44 Dennis Vash 54.1k1212 gold badges117117 silver badges132132 bronze badges asked Jun 7, 2020 at 10:27 ZuenieZuenie 97322 gold badges1313 silver badges3232 bronze badges 2

• You are returning array from the hook but you destruct it as an object. either remove square brackets from callbacks and add curly brackets or change curly brackets in ponents to square brackets – Dilshan Commented Jun 7, 2020 at 10:31
• It is worth noting that you should use useState() for isEnabled inside your hook. Also, you probably don't need to useCallback because it will work the same for when isEnabled is true and false. – Deykun Commented Jun 7, 2020 at 10:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

As for the error and types, currently you are returning a list which contains boolean types and functions of type () => void, where you want to return a tuple.

// Return from custom hook
return [isEnabled, toggleCallback];

// use it like so, and not as object { isEnabled,setIsEnbaled }
const [isEnabled,setIsEnbaled] = useToggle();

Fix the return types with:

return [isEnabled, toggleCallback] as const;

Or specify the return type:

type HookProps = (initialState: boolean) => [boolean, () => void];
const useToggle: HookProps = (initialState) => {...}

As for the hook implementation, it should look in JS like so, as variables are not connected to state, using toggleCallback in your example won't trigger a render.

function useToggle(initialValue = true) {
  const [isEnabled, toggle] = useReducer((p) => !p, true);
  return [isEnabled, toggle];
}

how to create custom hook :

export default function FakePage(props: any) {
    const {isEnabled, toggleCallback} = useToggle();
    return (
        <div>
            <ComponentOne isEnabled={isEnabled}/>
            <button onClick={toggleCallback}>Test</button>
        </div>
    );
}

// hook
export default function useToggle() {
    const [isEnabled,setIsEnabled] = useState(true)
    const toggleCallback= () => {
       setIsEnabled(current=>!current);
    };// no need to useCallback
    return {isEnabled, toggleCallback};
}

// and if you want to pass default value 

   export default function useToggle(default) {
        const [isEnabled,setIsEnabled] = useState(default)
        const toggleCallback= () => {
           setIsEnabled(current=>!current);
        };// no need to useCallback
        return {isEnabled, toggleCallback};
    }
// usage 
const {isEnabled, toggleCallback} = useToggle(false);

本文标签： javascriptUsing a hook in react to change boolean and get a callbackStack Overflow