如何在ReactJS中从JSON对象数组获取指定股票数据？

在ReactJS项目中引入了包含多支股票信息的JSON对象数组，之前单个JSON对象时能正常获取symbol、lastsale等字段数据，但改成对象数组后，想通过指定股票symbol（比如AAMC）获取对应字段（比如lastsale）的数据，该怎么实现？

当前相关代码 #

组件代码 #

import Stocks from "./stocks.json";

export default function Profile() {
  return (
    <>
      <h1>{Stocks.symbol}</h1>
      <h1>{Stocks.lastsale}</h1>
    </>
  );
}

修改后的stocks.json内容 #

[
  {
      "symbol": "AAMC",
      "name": "Altisource Asset Management Corp Com",
      "lastsale": "$36.38",
      "netchange": "0.88",
      "pctchange": "2.479%",
      "volume": "11317",
      "marketCap": "64654718.00",
      "country": "United States",
      "ipoyear": "",
      "industry": "Investment Managers",
      "sector": "Finance",
      "url": "/market-activity/stocks/aamc"
    },
    {
      "symbol": "AAU",
      "name": "Almaden Minerals Ltd. Common Shares",
      "lastsale": "$0.2167",
      "netchange": "-0.0036",
      "pctchange": "-1.634%",
      "volume": "196889",
      "marketCap": "29735879.00",
      "country": "Canada",
      "ipoyear": "2015",
      "industry": "",
      "sector": "",
      "url": "/market-activity/stocks/aau"
    }
]

解决方案 #

方法1：使用数组find方法直接查找 #

直接在组件内用数组的find方法匹配目标symbol，获取对应股票对象后再提取字段。注意处理找不到对应股票的情况，避免报错：

import Stocks from "./stocks.json";

export default function Profile() {
  // 指定要查找的股票symbol
  const targetSymbol = "AAMC";
  // 匹配对应股票对象
  const targetStock = Stocks.find(stock => stock.symbol === targetSymbol);

  // 未找到时返回提示
  if (!targetStock) {
    return <div>未找到对应股票信息</div>;
  }

  return (
    <>
      <h1>{targetStock.symbol}</h1>
      <h1>{targetStock.lastsale}</h1>
    </>
  );
}

方法2：提前创建symbol映射对象（适合多次查找场景） #

如果需要频繁根据symbol查询股票，建议先把数组转为以symbol为键的对象，提升查询效率：

import Stocks from "./stocks.json";

// 初始化时创建映射，仅执行一次
const stockMap = Stocks.reduce((map, stock) => {
  map[stock.symbol] = stock;
  return map;
}, {});

export default function Profile() {
  const targetSymbol = "AAMC";
  const targetStock = stockMap[targetSymbol];

  if (!targetStock) {
    return <div>未找到对应股票信息</div>;
  }

  return (
    <>
      <h1>{targetStock.symbol}</h1>
      <h1>{targetStock.lastsale}</h1>
    </>
  );
}

补充说明 #

• find方法会返回数组中第一个匹配的元素，若存在重复symbol，只会取第一个；
• 必须处理找不到股票的情况，否则访问targetStock的字段时会因undefined报错；
• 如果symbol是动态值（比如来自props、路由参数），只需将targetSymbol替换为对应动态变量即可。

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