Question

我正在尝试创建一个React组件，以显示各种课程的测试结果。我无法访问json文件中的scores对象。这是我正在使用的json文件的示例。

[
    {
    "length": "15",
    "average": "77",
    "created_at": "2019-02-01",
    "course": "MATH311",

    "scores": [
      {
        "correct": "12",
        "student_id": "1"
      },
      {
        "correct": "9",
        "student_id": "2"
      }
    ]
  },
  {
    "length": "25",
    "average": "17",
    "created_at": "2019-02-03",
    "course": "MATH301",

    "scores": [
      {
        "correct": "11",
        "student_id": "3"
      },
      {
        "correct": "17",
        "student_id": "4"
      },
      {
        "correct": "20",
        "student_id": "5"
      },
      {
        "correct": "18",
        "student_id": "6"
      }
    ]
  }
]

由此，我想创建一个组件，为每个考试显示一张卡片，并包含“课程”，“平均”，“长度”和每个分数。我可以获得路线，平均成绩和长度，但无法获得每个分数，因为它是一个对象。分数数量会有所不同。

我的代码看起来像这样。

<div className="exams">
{exams && exams.map((exam,index) => {
    return(
        <div>
            <p>{exam.course}</p>
            <p>{exam.average}</p>
            <p>{exam.length}</p>
            <div>
              {exam["scores"][0].id}
              {exam["scores"][0].correct}
            </div>

        </div>
    )
})}
</div>

Answer 1

由于得分是一个数组而不是对象，因此使用map遍历所有得分条目。像这样：

  <div className="exams">
    {exams && exams.map((exam,index) => { return(
    <div>
        <p>{exam.course}</p>
        <p>{exam.average}</p>
        <p>{exam.length}</p>
        <div>

            {exam && exam["scores"] && exam["scores"].map((score,index) => { return(
            <div>
                {score.correct} {score.student_id}

            </div>
            ) } )}
        </div>

    </div>
    ) })}
</div>

Answer 2

exam.scores是一个数组。使用javascript，您可以使用map对其进行迭代，为exam.scores中的每个项目生成一个jsx元素，就像您对exams数组所做的一样。代码可能看起来像这样

<div>
    {exam.scores.map(score => {
        return(
            <div key={score.student.id}>
                <p>score: {score.correct}</p>
            </div>
        )
    }}
</div>

映射数组时，需要确保每个子元素都有唯一的键值。

Answer 3

分数不是对象，而是数组。因此，就像考试一样，您必须map对其进行检查。

  exams.map((exam, index) => (
    <div key={index}>
      <p>{exam.course}</p>
      <p>{exam.average}</p>
      <p>{exam.length}</p>
      {exam.scores.map((scores, i) => (
        <div key={scores.student_id}>
          <p>{scores.correct}</p>
          <p>{scores.student_id}</p>
        </div>
      ))}
    </div>
  ));

从JSON中的对象获取项目

3 个答案: