如何使用useRef钩子获取两个data属性值？接口参数获取求助

代码核心问题 #

1. 省份参数获取错误：你之前获取单个参数时用provinsiRef.current[index].dataset.value，说明provinsiRef.current是DOM元素数组，但现在改成provinsiRef.current.dataset.value——数组本身没有dataset属性，直接访问肯定拿不到正确值。
2. 城市参数的ref复用错误：你用provinsiRef.current[index]获取城市值，混淆了省份和城市的DOM元素引用，城市选项应该对应独立的ref（比如kotaRef），不能复用省份的ref。

修正后的代码示例 #

第一步：为省份、城市分别绑定正确的ref

如果你的省份、城市是多选项结构，初始化数组类型的ref：

import { useRef, useState } from 'react';

// 省份选项的ref数组
const provinsiRef = useRef([]);
// 城市选项的ref数组
const kotaRef = useRef([]);
// 保存选中的省份索引（用于获取对应值）
const [selectedProvinsiIdx, setSelectedProvinsiIdx] = useState(0);

渲染选项时，给每个元素绑定对应ref项：

{provinsiList.map((item, idx) => (
  <div 
    key={idx} 
    ref={el => el && (provinsiRef.current[idx] = el)}
    onClick={() => setSelectedProvinsiIdx(idx)}
    data-value={item.value}
  >
    {item.name}
  </div>
))}

{kotaList.map((item, idx) => (
  <div 
    key={idx} 
    ref={el => el && (kotaRef.current[idx] = el)}
    onClick={() => handleKota(idx)}
    data-value={item.value}
  >
    {item.name}
  </div>
))}

第二步：修正handleKota函数

const handleKota = async (kotaIdx) => {
    try {
      // 通过选中的省份索引获取对应值
      const provinsi = provinsiRef.current[selectedProvinsiIdx]?.dataset.value;
      // 通过传入的城市索引获取对应值
      const kota = kotaRef.current[kotaIdx]?.dataset.value;

      // 校验参数有效性，避免无效接口请求
      if (!provinsi || !kota) {
        console.error('省份或城市参数不能为空');
        return;
      }

      setIsLoading(true);
      const result = await getBuildingOLDallKecamatan(provinsi, kota);
      setDataKecamatan(result);
      console.log(result);
    } catch (error) {
      // 不要空catch，打印错误便于排查
      console.error('获取数据失败:', error);
    } finally {
      setIsLoading(false);
    }
};

额外注意事项 #

• 使用?.可选链操作符：避免DOM未挂载、索引越界时抛出报错
• 不要留空catch块：接口请求失败时，错误信息能快速定位问题
• 绑定ref时加判断：el && (provinsiRef.current[idx] = el)，防止卸载时把null存入ref数组

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