如何解决React表单handleChange函数中的TypeScript错误7053

polhcujo  于 2023-02-10  发布在  TypeScript
关注(0)|答案(1)|浏览(119)

我尝试在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错误有什么建议吗?

uoifb46i

uoifb46i1#

TypeScript正在抱怨,因为它知道name是一个string
同时,您的Form界面具有一些特定键(namecontactNumber和...)。TypeScript无法确保e.target.name一定等于其中一个有效键。如果您始终确保e.target.name是有效的Form属性,则可以使用as关键字来确保TypeScript:

[name as keyof Form]: value

相关问题