如果是其他条件时，映射通过对象json在反应。

Question

使用if else条件显示学生详细信息，并希望在学生为空时显示一些值，例如“数据不可用”。

import React from "react";
import ReactDOM from "react-dom";
import { Grid, Row, Col } from "react-flexbox-grid";
import studentData from "./studentData.json";

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Student Details</h1>

        <table class="table table-hover">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Student Nme</th>
              <th scope="col">Roll No</th>
              <th scope="col">Obtained Marks</th>
            </tr>
          </thead>
          {studentData?.map((studentDetails, index) => {
            console.log(studentDetails)
            return (
              <tbody>
                <tr>
                  <th scope="row">{index}</th>
                  <td>
                   {studentDetails.student?.STNAME:"Data Not Available"}
                  </td>
                  <td>
                  {studentDetails.student?.ROLLNO}
                  </td>
                  <td>{studentDetails.MREMARKS}</td>
                </tr>
              </tbody>
            );
          })}
        </table>
      </div>
    );
  }
}

document.getElementById("contenter code hereainer"))；(ReactDOM.render)

Answer 1

使用三元算子

{studentData?.map((studentDetails, index) => {
            console.log(studentDetails)
            return (
              <tbody>
                <tr>
                  <th scope="row">{index}</th>
                  <td>
                   {studentDetails.student ? studentDetails.student.STNAME : Data not available}
                  </td>
                  <td>
                  {studentDetails.student?.ROLLNO}
                  </td>
                  <td>{studentDetails.MREMARKS}</td>
                </tr>
              </tbody>
            );
  })}