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 = () => {

    const inputRef = useRef([]);

    const [data, setData] = useState([]);

    

    useEffect( () => {

        let data = ['Name', 'Age', 'Gender'];

        inputRef.current = new Array(data.length);

        setData(data);

    }, []);

    

    useEffect( () => {

        //Example of using inputRef

        if(data.length !== 0) {

            inputRef.current[data.length - 1].focus();

        }

    }, [data]);

    

    return(

        <View>

            {data.map( (element, i) => <TextInput ref = {el => inputRef.current[i] = el} />)}

        </View>

    

    );

}