如何使动态类型可调用(响应自定义钩子)
如何使动态类型可调用(响应自定义钩子)
提问于 2021-03-12 03:03:28
假设我有一个自定义钩子，它返回数组中的3件东西
export const useInput = (store: string) => {
const [value, setValue] = React.useState(store);
const bind = {
value,
onChange: (e: InputChangeEvent) => {
setValue(e.target.value)
}
}
const reset = () => {
setValue(store)
}
return [value, bind, reset]
}并在组件中使用它
const SomeComponent = () => {
const [name, bindName, resetName] = useInput('')
const [email, bindEmail, resetEmail] = useInput('')
const [confirmEmail, bindConfirmEmail, resetConfirmEmail] = useInput('')
const onSubmitHandler = (e: FormSubmitEvent) => {
e.preventDefault()
console.log(`${name} ${email} ${confirmEmail}`)
resetName();
}
return (
<React.Fragment>
<form onSubmit={onSubmitHandler}>
<div className={styles.modalTitle}>
{homeText.action}
</div>
<div className={styles.textInputContainer}>
<input type="text" placeholder={homeText.plName} {...bindName}/>
<ErrorMessage message={'sad'}/>
</div>
<div className={styles.textInputContainer}>
<input type="email" placeholder={homeText.plEmail} {...bindEmail}/>
</div>
<div className={styles.textInputContainer}>
<input type="email" placeholder={homeText.plConfirm} {...bindConfirmEmail}/>
</div>
<button>Submit</button>
</form>
</React.Fragment>
)
}现在，resetName()或任何重置都是不可调用的，因为其中有3种类型，其中1种认为不应该像string那样调用，如何更改useInput的返回类型，使我能够调用可调用的() => void。
在调用resetName()时，ts不想要的确切内容是This expression is not callable. Not all constituents of type 'string | { value: string; onChange: (e: InputChangeEvent) => void; } | (() => void)' are callable. Type 'string' has no call signatures.
在我执行可调用的东西之前，我头上的一个解决方案是操纵类型并将其缩小到单个类型。还有其他想法吗？
更新
那么，做类型断言是个好主意吗？目前，我能够通过断言(as) (() => void)来使其工作。
const newResetName = resetName as (() => void)
newResetName()回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-12 13:55:03
这里的主要问题是，useInput的返回类型是一个条目数组，其类型是您在return [value, bind, reset]中返回的3个值的交集，而不是您需要的元组。
您可以使用as const要求类型记录将数组值作为不可变元组对待，这将将useInput的返回类型更改为元组：
return [value, bind, reset] as const页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66598704
复制相关文章
点击加载更多
相似问题
Java SaaS架构-可扩展性
使以编程方式添加的片段可单击，唯一可识别
错误: URL不使用可识别的协议
创建唯一和可识别的数字集
可伸缩性- SaaS可伸缩性足够吗？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
