如何解决如何使用react和typescript修复错误“不能将false类型的参数分配给currentValue:boolean=> boolean”的错误?
我想修复错误“不能使用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>
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。