打字稿错误：类型为"NodeListOf<HTMLInputElement> | undefined"的参数不能分配给类型为"可迭代<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不能像undefined is not iterable那样用作Array.from的参数。在将其提供给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游乐场