无法在 React 中显示来自 JSON 文件的数据

问题描述

我正在尝试在 React 中显示本地 JSON 文件中的数据。以下是我从控制台查看数据的方式：JSON data in the console。结构是Data -> Classes -> Class[0-730] -> Term（或任何其他）。

因此，如果我尝试在控制台中打印 Term of Class[0]，我会这样做 console.log(Data.Classes.Class[0].Term) 并得到想要的结果。但是，当我尝试在网站中显示相同的数据时，出现以下错误：

无法读取未定义的属性“0”

我的代码如下所示：

return Data.Classes ? (
<ul>
  {Object.keys(Data.Classes).map((item,idx) => {
    return item ? (
      <li key={idx}>
        <h3>{item.Class[idx] ? item.Class[idx] : "Doesn't exist"}</h3>
      </li>
    ) : null;
  })} 
   </ul>
  ): null;
};

我认为映射后会出现问题，导致 item.Class[idx] 未定义，但我不确定为什么。有什么我遗漏的吗？

解决方法

idx 是 item 的索引，所以使用深度较低的父 item 的索引没有意义。

由于您在 Object.keys(Data.Classes) 上被称为映射，因此您从字符串列表映射键，因此它看起来像这样：["key1","key2"..]。

在我看来，你可能想要这个：

{Data.Classes.Class.map((item,idx) => {
    return (
      <li key={idx}>
        <h3>{item.Term} - {item.Dept} - {item.Course} - {item.Section}</h3>
      </li>
    );
  })} 

我不知道你为什么要使用三元运算符。特定键可能为空，但 M​​ap 只会转到列表中的项目，因此项目永远不会为空。它可能为空（如 {} 或 ''）但不为空。