JavaScript find方法返回最后数据而非匹配ID问题排查

你提供的getContactInfo函数逻辑本身是正确的，它应该能返回与传入的contactId匹配的第一个sitePocs对象。出现始终返回最后一个对象（contactId为000002）的问题，根源不在这个函数内部，而是调用函数时传入的参数有误，或者点击事件处理逻辑存在问题。

可能的原因及解决方法 #

• 传入了错误的contactId
  检查调用getContactInfo的代码，确认每次点击时传入的contactId是否是当前点击行对应的skedDatas项的contactId：

  • 如果是循环渲染列表，是否因变量提升（如使用var）导致所有点击事件都引用了最后一个项的contactId？改用let或const可以避免这个问题。
  • 是否在事件处理中错误地硬编码了contactId为"000002"？

• 变量被意外覆盖
  检查代码中是否有其他地方修改了contactId变量，导致传入函数的值不是预期的点击行ID。

• 调试建议
  在getContactInfo函数开头添加日志，确认每次传入的参数：

  const getContactInfo = (contactId) => {
    console.log('传入的contactId:', contactId); // 查看实际传入的值
    const contact = sitePocs.find((contact) => contact.contactId === contactId);
    return contact;
  };
  

  这能快速定位是否是参数传递的问题。

正确调用示例 #

假设你在渲染skedDatas列表时绑定点击事件，确保事件处理函数能获取到当前项的contactId：

skedDatas.forEach(item => {
  const row = document.createElement('div');
  row.innerHTML = `<p>${item.classNumb} - ${item.location}</p>`;
  row.addEventListener('click', () => {
    const info = getContactInfo(item.contactId);
    console.log('匹配的联系人信息:', info);
  });
  document.getElementById('list').appendChild(row);
});

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