React中创建元素引用列表遇问题：refs始终为null求解决

问题根源 #

你的代码存在两个核心错误：

• 错误操作useRef对象本身而非其current属性：useRef的实际引用值存储在current字段中，直接写refs[index]只是给useRef实例新增属性，根本没修改到存储引用的数组。
• 未处理data动态变化场景：如果data长度改变，refs.current的数组长度不会自动更新，会导致索引越界或残留无效的null值。

修复后的代码 #

基础版（适用于data长度固定或变化不频繁的场景） #

import { useRef } from 'react';

const MyComponent = ({ data }) => {
    // 初始化空数组到current属性
    const refs = useRef([]);
    // 确保数组长度与data匹配，仅在长度变化时更新
    if (refs.current.length !== data.length) {
        refs.current = Array(data.length).fill(null);
    }

    return (
        <ul>
            {
                data.map((item, index) => (
                    <li key={index} ref={(element) => {
                        // 修改current中的数组元素，完成ref赋值
                        refs.current[index] = element;
                    }}>{item}</li>
                ))
            }
        </ul>
    );
};

进阶版（处理动态data+避免不必要重渲染） #

如果data频繁变化，推荐用useCallback缓存ref回调，减少不必要的组件重渲染：

import { useRef, useCallback } from 'react';

const MyComponent = ({ data }) => {
    const refs = useRef([]);

    // 同步数组长度与data
    if (refs.current.length !== data.length) {
        refs.current = Array(data.length).fill(null);
    }

    // 缓存ref回调函数
    const setRef = useCallback((element, index) => {
        refs.current[index] = element;
    }, []);

    return (
        <ul>
            {
                data.map((item, index) => (
                    <li key={index} ref={(el) => setRef(el, index)}>{item}</li>
                ))
            }
        </ul>
    );
};

验证方式 #

你可以在组件内添加一个测试按钮，点击后打印refs.current来确认ref是否正确赋值：

// 示例：添加打印按钮
<button onClick={() => console.log(refs.current)}>查看所有Ref</button>

内容的提问来源于stack exchange，提问作者Oscar Arranz