React下拉框选中名称后如何获取对应对象的ID和图片URL？

你的核心问题是当前用计数器作为索引取值的逻辑和用户下拉选择的内容没有关联，所以必然会出现匹配错误的问题。不需要额外拆分名称和ID做匹配，直接利用下拉选项的value属性绑定唯一标识即可实现需求，具体修改如下： #

修改逻辑 #

• 给<option>标签添加value属性，绑定当前项的唯一id值
• 移除冗余的counter相关状态，下拉选中后直接用选中的id值去对象数组中匹配对应条目
• 可以将存储选中图片URL和名称的两个状态合并为单个选中项状态，简化逻辑

完整修改后代码 #

import { useState } from 'react';

export default function MyComponent() {
  const [bulkImageArray, setBulkImageArray] = useState([]);
  // 直接存储选中的条目，不需要分开存url和name，也不需要计数器
  const [selectedItem, setSelectedItem] = useState(null);

  function handleChange(event) {
    const selectedId = event.target.value;
    // 用选中的id匹配数组中对应的对象
    const matchedItem = bulkImageArray.find(item => item.id === selectedId);
    setSelectedItem(matchedItem);
  }

  return (
    <div>
      <select onChange={handleChange}>
        {bulkImageArray.map((item) => (
          <option key={item.id} value={item.id}>
            {item.name}
          </option>
        ))}
      </select>

      {/* 选中后才渲染图片 */}
      {selectedItem && <img src={selectedItem.blank} alt={selectedItem.name} />}

      <div>
        {bulkImageArray.map((item) => (
          <img
            style={{
              width: '400px',
              height: '400px',
              cursor: 'pointer',
            }}
            key={item.id}
            alt={item.name}
            src={item.blank}
          />
        ))}
      </div>
    </div>
  );
}

补充说明 #

如果你不想合并状态，也可以保留原来的imageUrls和imagesNames状态，在handleChange中匹配到对应条目后分别赋值即可，核心逻辑都是通过选中的id做匹配，不要用计数器关联选中内容。

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