React Native类组件中动态Ref存入数组仅保留最后索引问题

你的代码存在两个核心问题，导致所有ref的index都指向最后一个值：

1. 数组对象引用重复：new Array(3).fill({input1: null, input2: null, index: null})会把同一个对象实例填充到数组的每一个位置。也就是说inputsRefs[0]、inputsRefs[1]、inputsRefs[2]本质是同一个对象，当循环执行到最后一次（i=2）时，这个唯一对象的index会被覆盖为2，最终所有元素的index都显示为2。
2. 闭包捕获循环变量引用：render里的ref回调函数会捕获循环变量i的引用而非具体值，这也会加剧所有ref指向最后索引的问题。

1. 正确初始化独立对象的ref数组 #

放弃fill方法，改用Array.from创建包含独立对象的数组，确保每个数组元素都是不同的对象实例：

inputsRefs = Array.from({ length: 3 }, () => ({
  input1: null,
  input2: null,
  index: null,
}));

2. 避免闭包问题（严谨性优化） #

在map循环中保存当前索引的局部变量，确保ref回调捕获到当前循环的具体索引值。

修改后的完整代码：

import React, {Component} from 'react';
import {View, TextInput, Button} from 'react-native';

class myComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  data = [1, 2, 3];

  // 初始化独立对象的ref数组
  inputsRefs = Array.from({ length: 3 }, () => ({
    input1: null,
    input2: null,
    index: null,
  }));

  render() {
    return (
      <View>
        {this.data.map((x, i) => {
          // 保存当前索引的局部变量
          const currentIndex = i;
          this.inputsRefs[currentIndex].index = currentIndex;
          return (
            <View key={currentIndex.toString()}>
              <TextInput ref={ref => (this.inputsRefs[currentIndex].input1 = ref)} />
              <TextInput ref={ref => (this.inputsRefs[currentIndex].input2 = ref)} />
            </View>
          );
        })}

        <Button
          title="print indexes"
          onPress={() => {
            console.log(this.inputsRefs.map(x => x.index));
            // 现在结果会是 [0,1,2]
          }}
        />
      </View>
    );
  }
}

export default myComponent;

动态长度适配优化（可选） #

如果data数组长度会动态变化，不要固定ref数组长度，而是在render中根据data长度动态生成：

// 替换原来的inputsRefs初始化
inputsRefs = [];

// 在render的map循环前添加
this.inputsRefs = this.data.map(() => ({
  input1: null,
  input2: null,
  index: null,
}));

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