React中如何根据用户输入筛选对象并映射对应数组？

问题根源 #

你原代码的核心问题是：Object.values(data)返回的是每个用户的喜好对象（比如{likes: [...], hates: [...]}），而input是字符串类型的用户名，两者永远无法匹配，导致filter后得到空数组，自然渲染不出内容。

最简解决方案 #

不需要用filter绕弯，直接通过对象的键名访问就能拿到目标用户的数据，这是处理键值对对象最直接的方式：

// 假设data是你的原始数据，input是选中的用户名
const data = {
  "Susan": {
    "likes": ["shopping", "skiing", "surfing"],
    "hates": ["cycling", "reading", "cleaning"]
  },
  "Andrew": {
    "likes": ["driving", "hiking", "coding"],
    "hates": ["dancing", "running", "cleaning dishes"]
  }
};

let input = "Susan";

// 直接通过键名获取用户数据
const user = data[input];

// 渲染组件
return (
  <div>
    <h3>{input} 的喜好</h3>
    <div>
      <h4>喜欢的事：</h4>
      <ul>
        {/* 映射likes数组，注意加唯一key */}
        {user.likes.map((item, idx) => (
          <li key={idx}>{item}</li>
        ))}
      </ul>
    </div>
    <div>
      <h4>讨厌的事：</h4>
      <ul>
        {/* 映射hates数组 */}
        {user.hates.map((item, idx) => (
          <li key={idx}>{item}</li>
        ))}
      </ul>
    </div>
  </div>
);

额外优化：处理用户不存在的情况 #

如果输入的用户名可能不在数据中，建议加个判断避免报错：

const user = data[input];

if (!user) {
  return <div>未找到该用户</div>;
}

// 正常渲染逻辑...

扩展：实现用户选择器 #

如果需要让用户手动选择用户名，可以用Object.keys(data)获取所有用户名生成选项：

import { useState } from 'react';

function App() {
  const [selectedUser, setSelectedUser] = useState("Susan");
  const data = { /* 你的原始数据 */ };
  const user = data[selectedUser];

  return (
    <div>
      {/* 用户选择下拉框 */}
      <select 
        value={selectedUser} 
        onChange={(e) => setSelectedUser(e.target.value)}
      >
        {Object.keys(data).map(name => (
          <option key={name} value={name}>{name}</option>
        ))}
      </select>

      {/* 渲染用户喜好 */}
      {!user ? (
        <div>未找到该用户</div>
      ) : (
        <div>
          <h3>{selectedUser} 的喜好</h3>
          <div>
            <h4>喜欢的事：</h4>
            <ul>{user.likes.map((item, idx) => <li key={idx}>{item}</li>)}</ul>
          </div>
          <div>
            <h4>讨厌的事：</h4>
            <ul>{user.hates.map((item, idx) => <li key={idx}>{item}</li>)}</ul>
          </div>
        </div>
      )}
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者m.skace1