React JS如何遍历嵌套JSON对象访问日期下的1.open字段

你的代码运行报错核心来自两处逻辑错误：

• 遍历范围错误：你直接对接口返回的根对象做一级key遍历，会遍历到Meta Data和Weekly Time Series两个字段，而日期键仅存在于Weekly Time Series字段下，访问Meta Data["2022-06-08"]会得到undefined，后续对undefined取属性就会触发运行时报错
• 内层遍历逻辑无效：你写的Object.keys(["2022-06-08"])是对硬编码的单元素数组取索引，完全没有读取接口返回的真实日期键，后续的["2022-06-08"][c]["1. open"]属于非法取值逻辑，必然报错

你需要先定位到存时间序列数据的Weekly Time Series字段，再遍历该字段下的所有日期键，逐个读取对应开盘价即可，同时要加空值兜底避免接口未返回时的初始渲染报错：

render() {
  const responseData = this.state.users;
  // 空值兜底，接口数据未返回时展示加载态
  if (!responseData || !responseData["Weekly Time Series"]) {
    return <div>数据加载中...</div>;
  }

  const weeklyData = responseData["Weekly Time Series"];
  const allDates = Object.keys(weeklyData);

  return (
    <div>
      {/* 如需展示元数据可直接取Meta Data下字段 */}
      <div>标的代码：{responseData["Meta Data"]["2. Symbol"]}</div>
      <ul>
        {allDates.map(date => (
          <li key={date}>
            日期：{date}，开盘价：{weeklyData[date]["1. open"]}
          </li>
        ))}
      </ul>
    </div>
  );
}

• 渲染异步接口数据时，必须加空值判断：组件首次渲染时state通常是初始空值，直接读取深层属性会直接抛错
• 列表key优先使用数据本身的唯一标识，此处日期字符串全局唯一，比用遍历索引当key更符合React最佳实践
• 不要硬编码日期字段，遍历Weekly Time Series下的所有键即可自动适配接口返回的全量日期数据，不需要手动写死日期值

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