React中如何通过与useRef同名的数据键动态为ref赋值

原有写法不生效的核心原因是：遍历数据拿到的key是字符串类型（比如"mango"），而你定义的mango、grape是独立的变量，JS 不会自动将字符串和当前作用域下的同名变量做映射，直接访问key.current本质是访问字符串对象的current属性，必然返回undefined，无法完成赋值。

以下是两种纯useRef的实现方案：

方案1：提前把ref统一归集到映射对象（推荐） #

直接将所有同名ref放到同一个对象中，key和数据对象的key完全对齐，遍历的时候直接通过key索引到对应ref即可：

import { useRef } from 'react'

// 初始化时直接把ref放到映射对象中，key和后续数据key保持一致
const refMap = useRef({
  mango: useRef(),
  grape: useRef(),
  potato: useRef()
})

// 你的数据对象
const data = {
  mango: 'yellow',
  grape: 'purple',
  potato: 'pc'
}

// 遍历赋值逻辑
Object.entries(data).forEach(([key, value]) => {
  const targetRef = refMap.current[key]
  // 保证ref存在且绑定了DOM元素再赋值
  if (targetRef?.current) {
    targetRef.current.value = value
  }
})

输入框绑定时直接取对应ref即可：

<input ref={refMap.current.mango} />
<input ref={refMap.current.grape} />
<input ref={refMap.current.potato} />

方案2：保留原有单独ref定义，手动建立映射 #

如果你不想修改原来单独定义ref的写法，可以额外加一层手动的映射关系，不需要改动其他现有逻辑：

import { useRef } from 'react'

// 保留你原有定义的独立ref
const mango = useRef()
const grape = useRef()
const potato = useRef()

// 手动建立字符串key到ref实例的映射
const refMap = {
  mango,
  grape,
  potato
}

// 你的数据对象
const data = {
  mango: 'yellow',
  grape: 'purple',
  potato: 'pc'
}

// 遍历赋值逻辑
Object.entries(data).forEach(([key, value]) => {
  const targetRef = refMap[key]
  if (targetRef?.current) {
    targetRef.current.value = value
  }
})

输入框绑定逻辑和你之前的写法完全一致：

<input ref={mango} />
<input ref={grape} />
<input ref={potato} />

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