我尝试在react表单中创建一个通用的handleChange
函数。handleChange函数将在表单字段更新时更新状态值。我希望函数能够处理嵌套值。以下是我的尝试:
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target
if(!name.includes('.')){
return setFormValue((prevState) => ({ ...prevState, [name]: value }))
}
const [prop, key] = value
return setFormValue((prevState) => {
const nested= prevState[prop] // TS ERROR HERE
nested[key] = value;
return ({
...prevState,
...nested
})
})
}
这是有效的,但是typescript抛出了一个错误。下面是在注解行中抛出的TS错误:
元素隐式具有“any”类型,因为类型“string”的表达式不能用于索引类型“Form”。在类型“Form”上找不到参数类型为“string”的索引签名。ts(7053)
我一直在研究这个错误有一段时间了,但与我搜索的一切,我不能破解它。
以下是表单数据的外观:
interface Form {
name: string
contactNumber: string
address: Address
category: string
}
interface Address {
postCode: string
country: string
city: string
name: string
}
你对我如何解决这个TS错误有什么建议吗?
1条答案
按热度按时间uoifb46i1#
TypeScript正在抱怨,因为它知道
name
是一个string
。同时,您的Form界面具有一些特定键(
name
、contactNumber
和...)。TypeScript无法确保e.target.name
一定等于其中一个有效键。如果您始终确保e.target.name
是有效的Form属性,则可以使用as
关键字来确保TypeScript: