ReactJS中如何获取对象属性？基于ID搜索对象属性实现咨询

嘿，我来帮你一步步搞定这个搜索功能，同时把对象属性获取的知识点讲明白～

一、先理清楚你的数据结构 #

你的state是一个数组，里面包裹了一个以ID为键的对象，所以第一步我们需要把这个核心数据对象取出来方便后续操作，比如const userData = yourState[0];。

二、完整实现代码示例 #

下面是一个函数组件的完整实现，包含输入框、搜索按钮和结果展示：

import { useState } from 'react';

function UserSearch() {
  // 初始化你的原始数据state
  const [originalData] = useState([
    {
      "456": { "name": "PonPon", "gerente": "sun2", "years": 25, "city": "W.T", "country": "BRAZIL" },
      "789": { "name": "PiPon", "gerente": "sun1", "years": 20, "city": "LAS VEGAS", "country": "EUA" }
    }
  ]);
  // 存储输入框的ID值
  const [searchId, setSearchId] = useState('');
  // 存储搜索结果
  const [searchResult, setSearchResult] = useState(null);

  // 处理输入框变化，更新searchId
  const handleInputChange = (e) => {
    setSearchId(e.target.value);
    // 输入时清空之前的结果，提升体验
    setSearchResult(null);
  };

  // 处理搜索按钮点击
  const handleSearch = () => {
    if (!searchId.trim()) {
      alert('请输入要搜索的ID');
      return;
    }
    // 取出核心数据对象（因为你的state是数组包裹的）
    const userDataObj = originalData[0];
    // 用方括号语法获取动态键对应的属性值
    const result = userDataObj[searchId];
    
    if (result) {
      setSearchResult(result);
    } else {
      alert(`没有找到ID为${searchId}的用户`);
      setSearchResult(null);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <input
        type="text"
        value={searchId}
        onChange={handleInputChange}
        placeholder="输入用户ID（如456）"
        style={{ padding: '8px', marginRight: '10px' }}
      />
      <button onClick={handleSearch} style={{ padding: '8px 16px' }}>
        搜索
      </button>

      {/* 渲染搜索结果 */}
      {searchResult && (
        <div style={{ marginTop: '20px', border: '1px solid #eee', padding: '15px' }}>
          <h3>用户信息</h3>
          <p><strong>姓名:</strong> {searchResult.name}</p>
          <p><strong>经理:</strong> {searchResult.gerente}</p>
          <p><strong>工龄:</strong> {searchResult.years}年</p>
          <p><strong>城市:</strong> {searchResult.city}</p>
          <p><strong>国家:</strong> {searchResult.country}</p>
        </div>
      )}
    </div>
  );
}

export default UserSearch;

三、React中获取对象属性的关键知识点 #

这里最核心的是动态键的属性获取，因为你要搜索的ID是用户输入的变量，所以有两种常用方式：

1. 方括号语法（必须用这种！） #

当你的键是变量、数字开头（比如"456"）或者包含特殊字符时，必须用方括号：

const id = "456";
const user = userDataObj[id]; // 正确
// 或者直接写字符串
const user = userDataObj["456"]; // 正确

2. 点符号语法（仅适用于固定的、合法的标识符键） #

如果键是固定的字符串（比如"name"），可以用点符号：

const userName = user.name; // 正确
// 但像user.456这种写法是语法错误，因为数字不能作为标识符开头

四、额外优化建议 #

• 可以给输入框添加type="number"，限制用户只能输入数字ID；
• 搜索结果可以用更美观的样式，比如表格；
• 可以支持回车触发搜索，给input添加onKeyPress事件，判断按下的是回车就调用handleSearch。

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