React.js中如何通过ID从对象数组获取对应值？

首先先明确你的合法数据源（修正了原数组的格式）：

const users = [
  { id: "1", name: "Jack" },
  { id: "2", name: "John" },
  { id: "3", name: "Ben" }
];

假设你已经通过输入框获取到目标ID（比如const targetId = "2"），下面是几种常用的匹配方法：

1. 使用Array.find()（推荐，最简洁高效） #

find()方法会遍历数组，返回第一个满足匹配条件的元素，找不到则返回undefined，非常适合ID唯一的场景：

const targetId = "2";
const matchedUser = users.find(user => user.id === targetId);
console.log(matchedUser); // 输出 { id: "2", name: "John" }

结合React状态的完整示例：

import { useState } from 'react';

function UserSearch() {
  const users = [
    { id: "1", name: "Jack" },
    { id: "2", name: "John" },
    { id: "3", name: "Ben" }
  ];
  const [inputId, setInputId] = useState('');
  const [matchedUser, setMatchedUser] = useState(null);

  const handleSearch = () => {
    const user = users.find(u => u.id === inputId);
    setMatchedUser(user);
  };

  return (
    <div>
      <input 
        type="text" 
        value={inputId} 
        onChange={(e) => setInputId(e.target.value)}
        placeholder="输入用户ID"
      />
      <button onClick={handleSearch}>查找</button>
      
      {matchedUser && <p>找到用户：{matchedUser.name}</p>}
      {!matchedUser && inputId && <p>未找到对应ID的用户</p>}
    </div>
  );
}

export default UserSearch;

2. 传统for循环（适合理解底层逻辑） #

如果你想手动实现循环匹配，用for循环也很直观：

const targetId = "2";
let foundUser = null;

for (let i = 0; i < users.length; i++) {
  if (users[i].id === targetId) {
    foundUser = users[i];
    break; // 找到后立即跳出循环，避免不必要的遍历
  }
}

console.log(foundUser); // 输出 { id: "2", name: "John" }

3. 使用Array.filter()（适合多匹配场景） #

如果你的数组中可能存在多个相同ID的对象（虽然通常ID是唯一的），可以用filter()返回所有匹配的元素组成的数组：

const targetId = "2";
const matchedUsers = users.filter(user => user.id === targetId);
console.log(matchedUsers); // 输出 [{ id: "2", name: "John" }]

// 取第一个匹配结果
const firstMatchedUser = matchedUsers[0];

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