点击img提取src中ID并赋值外部变量出现undefined问题求助

看起来你遇到的问题主要有几个可能的原因，我来一步步帮你排查和解决：

1. 确保拿到的是绑定事件的Img元素的src #

有时候e.target不一定是你绑定点击事件的<img>元素（哪怕你的img没有子元素，也可能因为事件冒泡或React事件委托出现意外），建议换成e.currentTarget.src——currentTarget始终指向绑定事件处理函数的那个元素，也就是你的img本身，能避免目标元素错位的问题：

const handleImgCLick = (e) => {
  function getID(url) {
    url = url.split(/(vi\/|v%3D|v=|\/v\/|ujd\.be\/|\/ss\/)/);
    return url[2] !== undefined ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
  }
  // 改用currentTarget确保拿到正确的img src
  clickedImgID = getID(e.currentTarget.src);
  console.log(clickedImgID); // 先打印看看是否正确获取到了值
};

2. 检查getID函数的匹配逻辑是否适配你的URL格式 #

你的getID函数是针对特定格式的URL设计的（比如包含vi/、v=这类标识的链接），如果你的fetchData.videos[i].thumbnail的URL格式和这些规则不匹配，就会导致url[2]为undefined，从而返回整个URL或者不符合预期的值。

建议先在getID里打印实际传入的URL和拆分结果，确认匹配逻辑是否生效：

function getID(url) {
  console.log('实际传入的URL:', url); // 查看缩略图的真实格式
  url = url.split(/(vi\/|v%3D|v=|\/v\/|ujd\.be\/|\/ss\/)/);
  console.log('拆分后的数组:', url); // 看是否能匹配到目标分组
  return url[2] !== undefined ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
}

根据实际的URL格式调整正则表达式，确保能精准提取到ID部分。

3. React组件中别用外部变量，改用useState管理状态 #

如果这是在React组件中，用外部变量clickedImgID会有核心问题：变量更新时不会触发组件重新渲染，所以当你在组件其他地方读取这个变量时，看到的可能还是旧值（甚至初始的undefined），看起来像是没更新，但实际上变量已经改变了。

这时候应该用React的useState来管理这个状态，状态更新时组件会自动重新渲染，你能在组件任何地方拿到最新的值：

import { useState } from 'react';

// 在组件内部声明状态
const [clickedImgID, setClickedImgID] = useState(null);

const handleImgCLick = (e) => {
  function getID(url) {
    url = url.split(/(vi\/|v%3D|v=|\/v\/|ujd\.be\/|\/ss\/)/);
    return url[2] !== undefined ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
  }
  const id = getID(e.currentTarget.src);
  setClickedImgID(id); // 更新状态
};

关于数组push偶尔生效的问题 #

这同样是React组件重新渲染导致的：外部数组在组件重新渲染时可能被重新初始化，或者数组更新了但组件没触发重渲染，所以你看不到最新内容。改用useState管理数组状态就能解决：

const [clickedImgIDs, setClickedImgIDs] = useState([]);

const handleImgCLick = (e) => {
  // ... 提取id的逻辑
  setClickedImgIDs(prev => [...prev, id]); // 用函数式更新确保拿到最新数组
};

先按上面的步骤排查，尤其是先打印getID的传入值和返回值，定位问题环节，应该就能解决你的问题了。

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