React Native Hooks - 动态地创建一个引用数组

Question

介绍

我有一组数据，其中包含具有唯一 ID 的对象。

我正在尝试创建尽可能多的引用。例如，如果数组有 4 个元素，那么我将创建 4 个引用。每个引用都必须包含在一个数组中，而且我需要将它与对象的唯一 ID 相关联。

这是我在“伪代码”中尝试做的事情：

伪代码

 data = [{id: "10i3298yfrcd", ...}, {id: "y48hfeucldnjs", ...}]

 references = data.map(({id}) => useRef(null))

问题

我不知道如何将每个创建的引用与其各自的对象 ID 相关联（只是为了访问引用，例如使用字母数字索引数组或类似的东西）......

另外，以这种方式创建引用时出现错误：

React 检测到 %s 调用的 Hooks 的顺序发生了变化。如果不修复，这将导致错误和错误。有关更多信息，请阅读 Hooks 规则：https://reactjs.org/docs/hooks-rules.html

所以我想这不是动态创建引用的有效形式。

任何想法如何做到这一点？谢谢。

Answer 1

这是根据 data.lenght 创建 useRef 的方法import { useEffect, useRef, useState } from react;const ArrayInputs = () => {&nbsp; &nbsp; const inputRef = useRef([]);&nbsp; &nbsp; const [data, setData] = useState([]);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; useEffect( () => {&nbsp; &nbsp; &nbsp; &nbsp; let data = ['Name', 'Age', 'Gender'];&nbsp; &nbsp; &nbsp; &nbsp; inputRef.current = new Array(data.length);&nbsp; &nbsp; &nbsp; &nbsp; setData(data);&nbsp; &nbsp; }, []);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; useEffect( () => {&nbsp; &nbsp; &nbsp; &nbsp; //Example of using inputRef&nbsp; &nbsp; &nbsp; &nbsp; if(data.length !== 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputRef.current[data.length - 1].focus();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, [data]);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {data.map( (element, i) => <TextInput ref = {el => inputRef.current[i] = el} />)}&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; );}