使用钩子来改变布尔值并获得回调

Question

我正在尝试在 React 中使用钩子。钩子应该给我一个布尔值和一个回调。当回调被调用时，布尔值应该改变值。当我尝试检索值和回调时，出现错误。

属性isEnabled在 type 上不存在(boolean | (() => void))[]。上线了const {isEnabled, toggleCallback} = useToggle()；

我究竟做错了什么？

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];
}

Answer 1

至于错误和类型，当前您正在返回一个列表，其中包含booleantype 的类型和函数() => void，您希望在其中返回 tuple。

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

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

修复返回类型：

return [isEnabled, toggleCallback] as const;

或者指定返回类型：

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

至于钩子实现，它在 JS 中应该像这样，因为变量没有连接到状态，toggleCallback在您的示例中使用不会触发渲染。

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