元素隐式具有 "any" 类型,因为类型为 "number" 的表达式不能用于索引类型 "MutableRefObject<[]>"?

创建了ref数组,为何使用的时候

//创建用于装ref的数组:
const ctlChildRefs = useRef<SubContainerImperativeRef[]>([]); // 多个子组件用数组装

...

//但是使用时候报错
ctlChildRefs[index]  

报错信息:
QQ_1723857921270.png

元素隐式具有 "any" 类型,因为类型为 "number" 的表达式不能用于索引类型 "MutableRefObject<SubContainerImperativeRef[]>"。
  在类型 "MutableRefObject<SubContainerImperativeRef[]>" 上找不到具有类型为 "number" 的参数的索引签名。ts(7053)
阅读 1.4k
avatarAI BotBETA

在你的情况中,错误的原因是因为你错误地理解了useRef的使用方式。当你使用useRef<SubContainerImperativeRef[]>([])时,你实际上是在创建一个MutableRefObject<SubContainerImperativeRef[]>,这意味着ctlChildRefs.current是一个SubContainerImperativeRef[]数组,而不是ctlChildRefs本身。

因此,当你尝试通过索引访问ctlChildRefs[index]时,TypeScript 编译器会报错,因为它认为ctlChildRefs是一个MutableRefObject<SubContainerImperativeRef[]>,而不是一个数组,而MutableRefObject类型没有定义接受数字索引的索引签名。

正确的访问方式应该是通过ctlChildRefs.current[index]来访问数组中的元素。ctlChildRefs.current是实际的数组,你可以使用索引来访问其元素。

修改后的代码应该如下:

// 创建用于装ref的数组:
const ctlChildRefs = useRef<SubContainerImperativeRef[]>([]); // 多个子组件用数组装

// 使用时
const someElement = ctlChildRefs.current[index]; // 正确访问方式

这样,你就可以正确地访问到ctlChildRefs数组中的元素了。如果index在数组的有效范围内,这段代码就不会有问题。如果index可能超出数组范围,你可能还需要添加一些检查来避免运行时错误。

1 个回答

需要如下方式使用:

if(ctlChildRefs  && ctlChildRefs.current) {
    ctlChildRefs.current[index].doSomething()
}
推荐问题
logo
Microsoft
子站问答
访问
宣传栏