在 react 中使用钩子来更改布尔值并获取回调

Question

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

属性isEnabled在类型(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

至于错误和类型，目前您返回一个列表，其中包含boolean类型和函数 类型() => void，您要在其中返回一个元组。

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

Answer 2

如何创建自定义钩子：

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);