Typescript 错误：'NodeListOf 类型的参数<htmlinputelement> | undefined' 不可分配给'Iterable'类型的参数<htmlinputelement> ……”</htmlinputelement></htmlinputelement>

Question

在我的 React/Typescript 应用程序中，我通过使用“e.currentTarget”访问事件侦听器中的输入数组。 我正在使用 Array.from() 将 NodeListOf 转换为数组，并确保配置我的 TS.config.json 设置为“es2015”。 但是我收到了这个错误。
错误

奇怪的是，这个错误不会发生在我的原始目录中。 我已经复制了我的项目文件夹，删除了节点模块，将其压缩并重新打开，这就是发生此错误的时候。 不太确定如何解决此问题，如果有人有建议或解决方案，将不胜感激。

    e: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<Element>,
    letter: string,
    idx: number,
  ) => {
    const fields: HTMLInputElement[] = Array.from(
      e.currentTarget.parentElement?.parentElement?.querySelectorAll('input')
 )

    const length: number = fields.length
    const position: number = fields.indexOf(e.target)

Answer 1

您没有提供太多代码，但我猜这是因为e.currentTarget.parentElement?.parentElement?.querySelectorAll('input')可能未定义。 undefined不能用作Array.from的参数，因为undefined is not iterable的。 在将其提供给Array.from之前，您需要确保它存在。 两种可能的解决方案：

1. 检查您要定位的 NodeList 是否确实存在，然后分配您的变量

if (document.querySelector('.maybe')?.parentElement?.querySelectorAll('.doesnt-exist?')) {
  const fields = Array.from(document.querySelector('.maybe')!.parentElement!.querySelectorAll('.doesnt-exist?'))
}

2. 将您的潜在 NodeList 分配给一个变量，但默认为[] ，以防万一。 将该变量自动转换为HTMLInputElement[] ，然后可以在Array.from中安全地使用它：

const checker = 
  document.querySelector('.maybe')?.parentElement?.querySelectorAll('.doesnt-exist?') ?? [] as HTMLInputElement[]

const fields: Element[] = Array.from(checker)

TS游乐场