如果在反应中通过对象 json 进行映射时的其他条件

Question

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

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>
    );
  }
}

    

ReactDOM.render(, document.getElementById("继续enter code hereainer"));

Answer 1

使用ternary operator

{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>
            );
  })}