使用钩子响应更改布尔值并获取回调答案

【问题标题】：Using a hook in react to change boolean and get a callback使用钩子响应更改布尔值并获取回调
【发布时间】：2020-09-26 08:25:01
【问题描述】：

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

类型(boolean | (() => void))[] 上不存在属性isEnabled。上线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];
}

【问题讨论】：

您正在从钩子返回数组，但您将其作为对象破坏。从回调中删除方括号并添加大括号或将组件中的大括号更改为方括号
值得注意的是，你应该在你的钩子中使用 useState() 来实现 isEnabled。此外，您可能不需要 useCallback，因为当 isEnabled 为 true 和 false 时，它的工作方式相同。

标签： javascript reactjs typescript react-hooks

【解决方案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];
}

【讨论】：

【解决方案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);

【讨论】：

你应该添加一个解释，说“不需要使用回调”不是教/解释太多