通过数组创建的React refs不生效，传入input的ref始终为undefined

1. 子组件定义位置错误 #

你把TextInput组件直接定义在MyComponent的函数体内，每次MyComponent触发重渲染时，都会生成一个全新的TextInput实例，旧实例会被卸载，挂载的新实例会重置绑定的ref，自然获取不到正确的引用。

• 修复方案：把TextInput移到MyComponent外部定义。

2. 根节点缺失 #

你在return语句中直接返回了两个TextInput组件，没有包裹在同一个根节点/React.Fragment下，会直接触发语法错误，导致组件渲染失败，ref自然无法正常绑定。

• 修复方案：用<>（React.Fragment简写）包裹所有返回的子元素。

3. 额外可修复问题（和ref异常无关，但会导致其他运行错误） #

• onChange={updateField()}写法错误，你直接执行了updateField函数，而不是把函数引用传给onChange，应该改成onChange={updateField}（无自定义参数场景）。
• 第二个TextInput传了label属性但组件内没有接收使用，也没有对应的占位处理。

修复后的完整代码示例 #

// 子组件移到外部定义
const TextInput = ({ name, value, inputRef, onChange }) => (
  <input
    name={name}
    value={value}
    onChange={onChange}
    ref={inputRef}
  />
)

const MyComponent = () => {
  const refs = useMemo(() => Array(2).fill(0).map(() => React.createRef()), []);

  // 示例updateField的正确写法，可根据业务逻辑调整
  const updateField = (e) => {
    console.log(e.target.value)
  }

  return (
    <> {/* 增加根Fragment包裹 */}
      <TextInput
        name="lastname"
        value="Nom *"
        onChange={updateField}
        inputRef={refs[0]}
      />
      <TextInput
        name="firstname"
        value="Prénom *"
        onChange={updateField}
        inputRef={refs[1]}
      />
    </>
  )
}

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