问题描述
我想修复错误“不能使用react和typescript将false类型的参数分配给(currentValue:boolean)=> boolean。
我有一个如下定义的方法toggleDialogVisibility
export const useDialog() {
const {setDialogVisibility} = React.useContext(DialogContext);
return ({
const toggleDialogVisibility = (toggleValue: (currentValue: boolean) => boolean) => { //this is causing the error
setDialogVisible(toggleValue);
};
} );
};
我在如下两个部分中称呼它,
function Parent() {
const {toggleDialogVisibility} = useDialog();
return (
<div onClick={() => toggleDialogVisibility(open => !open)} />
);
}
function AnotherComponent() {
const {toggleDialogVisibility} = useDialog();
const handle = () => {
toggleDialogVisibility(false); //error here
}
}
我不确定如何解决此问题。有人可以帮我吗谢谢。
解决方法
在此代码中:
return (
const toggleDialogVisibility = (toggleValue: boolean) => {
setDialogVisible(toggleValue);
};
);
您认为您正在返回具有函数的对象,但事实并非如此。
修复
例如返回一个函数
return ({
toggleDialogVisibility: (toggleValue: boolean) => {
setDialogVisible(toggleValue);
};
});
,
我认为您不需要useDialog
function Parent() {
const {setDialogVisibility} = React.useContext(DialogContext);
return (
<div onClick={() => setDialogVisibility(open => !open)} /> //getting error here
);
}
function AnotherComponent() {
const {setDialogVisibility} = React.useContext(DialogContext);
const handle = () => {
setDialogVisibility(false); //error here
}
}
如果真的想要,我更喜欢
export const useDialog() {
const {setDialogVisibility} = React.useContext(DialogContext);
return React.useCallback(()=> {
setDialogVisibility(x=> !x)
},[setDialogVisibility])
};
function Parent() {
const toggle = useDialog();
return (
<div onClick={toggle} /> //getting error here
);
}
function AnotherComponent() {
const toggle = useDialog();
return <div onClick={toggle}>Close</div>
}