如何从嵌套JSON列表中按城市名过滤并返回多字段信息？

问题背景 #

你有一份包含美国州及城市信息的嵌套JSON数据：

[{"state": "Iowa ","id": "IA","places": [{"city": "Ames","description": "ames-description"},{"city": "Davenport ","description": "davenport-description"}]},{"state": "Illinois ","id": "IL","places": [{"city": "Chicago","description": "chicago-description"},{"city": "Elgin ","description": "elgin-description"},{"city": "Joliet ","description": "joliet-description"}]}]

需要在React的CityDetailsPage组件中，通过useParams获取URL中的城市名，过滤出对应城市的描述、所属州名及州ID，最终渲染格式如下（以Elgin为例）：

Elgin, IL
Illinois
description of Elgin

原代码存在变量名错误、数据结构处理不当的问题，无法获取州相关信息，以下是修正后的实现方案：

完整实现代码 #

const CityDetailsPage = () => {
  const { cityname } = useParams();
  // 假设stateNames是你的嵌套JSON数据
  const stateNames = [{"state": "Iowa ","id": "IA","places": [{"city": "Ames","description": "ames-description"},{"city": "Davenport ","description": "davenport-description"}]},{"state": "Illinois ","id": "IL","places": [{"city": "Chicago","description": "chicago-description"},{"city": "Elgin ","description": "elgin-description"},{"city": "Joliet ","description": "joliet-description"}]}];

  // 查找包含目标城市的州及对应城市信息
  const match = stateNames.find(state => 
    state.places.some(city => city.city.trim() === cityname.trim())
  );
  // 从匹配到的州中提取目标城市详情
  const targetCity = match?.places.find(city => city.city.trim() === cityname.trim());

  // 处理未找到城市的兜底情况
  if (!match || !targetCity) {
    return <p>City not found</p>;
  }

  return (
    <div>
      <p>{`${targetCity.city.trim()}, ${match.id.trim()}`}</p>
      <p>{match.state.trim()}</p>
      <p>{targetCity.description}</p>
    </div>
  );
};

export default CityDetailsPage;

关键优化点说明 #

• 处理空格问题：原始数据中的州名、城市名存在尾空格（如"Iowa "、"Elgin "），用trim()去除前后空格后再匹配，避免因空格导致匹配失败。
• 高效查找逻辑：用find直接定位包含目标城市的州，再从该州的places中找到目标城市，相比原代码的map+filter更高效，且直接保留州的完整信息。
• 兜底处理：添加!match || !targetCity的判断，避免未找到城市时出现undefined报错。
• 精准渲染：按照需求格式拼接城市名+州ID，渲染州名和描述，确保输出符合预期。

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