打字稿错误：类型 'string' 不可分配给类型 '"allName" | `allName.$number.nestedArray`' 在反应钩子形式

Posted 2023-02-19

【中文标题】打字稿错误：类型 \'string\' 不可分配给类型 \'"allName" | `allName.$number.nestedArray`\' 在反应钩子形式

【英文标题】：Typescript error: Type 'string' is not assignable to type '"allName" | `allName.$number.nestedArray`' in react hook form打字稿错误：类型 'string' 不可分配给类型 '"allName" | `allName.$number.nestedArray`' 在反应钩子形式

【发布时间】：2021-09-04 21:27:03

【问题描述】：

我正在使用 typescript 处理 react hook 表单。我的数据结构看起来是数组中的数组。所以我尝试使用useFieldArray

allName: [
    
      name: "useFieldArray1",
      nestedArray: [
         name1: "field1", name2: "field2" ,
         name1: "field3", name2: "field4" 
      ]
    ,
    
      name: "useFieldArray2",
      nestedArray: [ name1: "field1", name2: "field2" ]
    
  ]

但是当我尝试为输入设置名称时，例如allName[$nestIndex].nestedArray 我收到以下警告。

Type 'string' is not assignable to type '"allName" | `allName.$number.nestedArray`'

这里我附上了我的代码的代码沙箱链接。 https://codesandbox.io/s/gallant-buck-iyqoc?file=/src/nestedFieldArray.tsx:504-537 如何解决这个问题？

【问题讨论】：

你的 nestedIndex 属性 NestedFieldArray 被声明为类型 string，但它在 <Fields> 组件中传递了一个数字。它应该是一个数字。方括号可能是不必要的，名称应该是 `allName.$nestIndex.nestedArray` as const 以匹配 the documentation 所说的内容。

@Calvin 我按照您的建议进行了更改。我仍然遇到同样的问题。 codesandbox.io/s/pedantic-fermi-rvuzq?file=/src/…

@Calvin 第 15 行的问题

将as const 附加到该行是否有效？

@Calvin 该错误现已解决。我面临一个问题，我的表单未使用默认值呈现。输入在初始时间为空。但是，默认值有一些有效值。 codesandbox.io/s/vigilant-cori-36ose?file=/src/…

【参考方案1】：

你好，我看到了几件事，

1) 您必须将其cast 设置为您导出的类型，或者明确地将const compiler needs to be aware of the type。

2) 我还注意到你有` vs ' ticks/quote

3。附言。 const 适用于较新版本的 Tyspescript 编译器，但对于较旧版本，如果您更改它 any 它应该可以工作！

 //option 1
 name: `allName.$nestIndex.nestedArray` as const

// option 2 for older versions
name: `allName.$nestIndex.nestedArray` as any


 // or if assigning a variable, but it wont work in your code
 // let name = <const> `allName.$nestIndex.nestedArray`